[Vuejs]-Vue.js method change event doesn't trigger

by

1👍

✅

There is no task property in data object here so you need to change in tasks array, And to do this you need to pass index to identify which task need to change.

var app = new Vue ({
  el: '#root',
  data:  {
    tasks: [
           {description: 'clean room', completed: true, id: 1},
           {description: 'do homework', completed: true, id: 2},
           {description: 'go to sleep', completed: false, id: 3}
           ]
          },
  methods: {
    changeComplete(index) {
          this.tasks[index].completed = !this.tasks[index].completed;
          }
      }
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="root">
<div>
<div v-for="task,index in tasks" :key="task.id" v-if="task.completed">
  <ul>
  <li v-text="task.description"></li>
  <input type="checkbox" @change="changeComplete(index)">
  </ul>
</div>
</div>
</div>

Or better you can change just class to revert or toggle task status

var app = new Vue ({
  el: '#root',
  data:  {
    tasks: [
           {description: 'clean room', completed: true, id: 1},
           {description: 'do homework', completed: true, id: 2},
           {description: 'go to sleep', completed: false, id: 3}
           ]
          },
  methods: {
    changeComplete(index) {
          this.tasks[index].completed = !this.tasks[index].completed;
          }
      }
  })
.completed{
  color: green;
  text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="root">
<div>
<div :class='{completed:task.completed}' v-for="task,index in tasks" :key="task.id">
  <ul>
  <li v-text="task.description"></li>
  <input type="checkbox" @change="changeComplete(index)">
  </ul>
</div>
</div>
</div>

1👍

You need to refer to the task you want to complete inside the callback:

@change="changeComplete(task)"

and then:

changeComplete(task) {
    task.completed = !task.completed;
}

And your v-if shows the completed tasks, I suppose you want to show incomplete ones:

v-if="task.completed == false"

Here’s a working copy:

Vue.config.productionTip = false;
Vue.config.devtools = false;

var app = new Vue({
  el: '#root',
  template: '<div> \
    <div v-for="task in tasks" :key="task.id" v-if="task.completed == false"> \
      <ul> \
        <li> \
          <span v-text="task.description"></span> \
          <input type="checkbox" @change="changeComplete(task)"> \
        </li> \
      </ul> \
    </div></div>',
  
  data: {
    tasks: [{
        description: 'clean room',
        completed: false,
        id: 1
      },
      {
        description: 'do homework',
        completed: false,
        id: 2
      },
      {
        description: 'go to sleep',
        completed: false,
        id: 3
      }
    ]
  },
  methods: {
    changeComplete(task) {
      task.completed = !task.completed;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>

Leave a comment