如何在VueJS中$watch列表项的属性
如何在VueJS中$watch列表项的属性
提问于 2018-09-18 16:08:26
如何对列表项的特定属性进行$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/
回答 3
Stack Overflow用户
发布于 2018-09-18 16:53:00
使用您当前的方法，您必须深入观察数组并进行一些繁重的计算，以便找出更改后的元素。请查看此链接以获取示例：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/
Stack Overflow用户
发布于 2018-09-18 17:02:31
要查看特定属性，我将为列表项创建另一个组件，并将该项作为值传递，以查看该组件的更改。
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;
}
}
});Stack Overflow用户
发布于 2020-10-10 12:15:09
我用了这个，它对我很有效。
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 }
]
},
watch:{
todo: function(val) {
console.log ("This TODO is Done", val)
}
});<template>
<div class="mainDiv" v-for="(index, todo) from todos">
<div>{{todo.text}}</div>
<input type="checkbox" v-model="todo[index].done">
</div>
</template>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52390641
复制相关文章
相似问题
腾讯云开发者
