Vue.js 如何在VueJS中查看列表项的$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 here:

使用当前的方法，您必须深入观察数组并进行一些繁重的计算，以找出更改后的元素。检查此链接以获取示例：

我认为更好的方法是使用

change

事件处理程序：

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

---

jsiddle:

要查看特定属性，我将为列表项创建另一个组件，并将该项作为值传递，以查看该组件的更改

Vue.component("TaskItem", {
    template: `
        <li
            class="task-item"
            :class="{ done: complete }"
        >
            <p>{{ task.description }}</p>
            <input type="checkbox" v-model="complete">
        </li>
    `,
    props: ["task"],
    computed: {
        complete: {
            set(done) {
                this.$emit("complete", this.task, done);
                // we force update to keep checkbox state synced
                // in case if task.done was not toggled by parent component
                this.$forceUpdate();
            },
            get() {
                return this.task.done;
            }
        }
    }
});

new Vue({
    el: "#app",
    template: `
        <div>
            <ul class="task-list">
                <TaskItem
                    v-for="(task, i) in tasks"
                    :key="i"
                    :task="task"
                    @complete="complete"
                />
            </ul>
            <button @click="completeFirstTask">Complete first task</button>
        </div>
    `,
    data() {
        return {
            tasks: [
                { description: "Get milk", done: false },
                { description: "Barber shop", done: true },
                { description: "Fix sleep cycle", done: false }
            ]
        };
    },
    methods: {
        complete(item, done) {
            item.done = done;
        },
        completeFirstTask() {
            this.tasks[0].done = true;
        }
    }
});

Vue.component（“任务项”{
模板：`

{{task.description}}


`,
道具：[“任务”]，
计算：{
完成：{
设置（完成）{
this.$emit（“完成”，this.task，done）；
//我们强制更新以保持复选框状态同步
//如果父组件未切换task.done
这是.$forceUpdate（）；
},
得到（）{
返回此.task.done；
}
}
}
});
新Vue({
el:“应用程序”，
模板：`


完成第一项任务
`,
数据（）{
返回{
任务：[
{说明：“获取牛奶”，完成：false}，
{描述：“理发店”，完成：正确}，
{说明：“修复睡眠周期”，完成：false}
]
};
},
方法：{
完成（项目，完成）{
item.done=完成；
},
completeFirstTask（）{
this.tasks[0]。done=true；
}
}
});

---

我用过这个，它适合我

var vm=new Vue({
el:“应用程序”，
数据：{
myObject:{done:true}，
待办事项：[
{text:“学习JavaScript”，完成：false}，
{文本：“学习Vue”，完成：false}，
{text:“在JSFiddle中玩”，完成：true}，
{文本：“构建一些很棒的东西”，完成：真的}
]
},
观察：{
todo:函数（val）{
console.log（“此TODO已完成”，val）
}
})；

{{todo.text}

Deep-watching听起来绝对没有吸引力使用@change属性的问题在于它只捕获由更改该UI元素的值而引起的更改。如果代码中的某些内容更改了应用程序中其他位置的值，则您将被蒙在鼓里。这是有道理的。如果您只关心是否有任何元素已经更改，

数组上的deep watch

应该可以。困难的部分是确定更改的元素。这基本上只是让您知道TODOs中的任何内容是否已更改，即使它不是已完成的属性？创建组件的想法听起来很有趣。您能详细说明吗？我也有同样的问题。