[Vuejs]-How con i change data value from a function?

by

0👍

✅

Actually I don’t know what your second component is used to be, but you can solve your problem like this:

In the template

<template>
  <div>
    <button @click="addCount()"></button>
    <div>You have clicked the button {{count}} times.</div>
  </div>
</template>

• @click is the same like v-on:click

• you should write it like following: addCount()

In the script:

export default {
  data() {
    return {
      count: 0,
    }
  },

  methods: {
    addCount() {
      this.count += 1;
    }
  }
}

• define count in your data

• use methods and on every click on your button add 1 to the current value

This should solve your problem. Please give me a short feedback if this worked out for you!

For little testing: You can also subtract from count. Just create a second button and make another click event an there you use this.count -= 1. This will subtract 1 each time you click it.

Leave a comment