vue.js - 如何在 VueJS 中 $watch 列表项的属性

Question

我如何 $watch 更改列表项的特定属性？例如在下面的代码中，我想知道任何 TODO 列表项上的 Done 属性何时更改。

我从文档中看到我可以查看对象的子属性，例如下面代码中的 myObjects.done，但我不确定列表的语法。

我还应该提到我更愿意 $watch 数据而不是将事件处理程序放在 UI 中，并在任何更改属性的地方调用函数

var vm = new Vue({
  el: "#app",
  data: {
    myObject: { done: true },
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
});

//This works wonderfully on non list items
vm.$watch("myObject.done", function(val)
{
    console.log("myObject.done changed", val);
});

//How do I monitor changes to the done property of any of the todo items?
vm.$watch("todos[*].done", function(val)
{
    console.log("todos.done changed", val);
})

JSFiddle 在这里:http://jsfiddle.net/eywraw8t/376544/

Answer 1

使用当前的方法，您必须深入观察数组并进行一些繁重的计算才能找出已更改的元素。检查此链接以获取示例: Vue - Deep watching an array of objects and calculating the change?

我认为更好的方法是使用 change 事件处理程序:

<input type="checkbox" v-model="todo.done" @change="onTodoChange(todo, $event)">

JSFiddle:http://jsfiddle.net/47s0obuc/