[Vuejs]-What's the technical explanation for failure of vue binding mechanisim in certain scenarios

by

1👍

✅

Vue.js only makes the data field reactive. Other methods are not watched.

You need to move todos under data for this to work.

new Vue({
 el: "#app",
 data() {
   return {
    todos: [
     { text: "Item1", done: true },
     { text: "Item2", done: true },
     { text: "Item3", done: true },
     { text: "Item4", done: true }
   ]
  }
 },
 methods: {
  toggle: function(todo){
    todo.done = !todo.done
  }
 }
})

Note that data can be a simple field or a method. The recommended way is to make it a method.

Here’s a working example with your data.

👤Radu Diță

Leave a comment