vue js change value of component props code example

Example: vuejs change prop value

//In your component (here TaskTemplate.vue)
methods: {
  add() {
    this.$emit('add-counter', this.taskId);
  }
}

//In App.vue
<task-template
        :task-name="task.name"
        :task-id="task.id"
        :task-counter="task.counter"
        @add-counter="addTaskCounter"
      >
</task-template>

//...
data() {
  return {
    task: {
      id: 0,
      name: 'Empty been',
      counter: '2'
    }
  }
}

methods: {
	addTaskCounter(taskId) {
  		const identifiedTask = this.tasks.find((task) => task.id === taskId);

  		identifiedTask.counter += 1;
  	}
}