Javascript Vue.js-选中了错误的复选框

使用Vue.js，我将显示带有复选框的项目列表。单击复选框将向下移动该项目，并进行删除。问题是，当我单击复选框时，选中了错误的复选框

例如，当我点击苹果复选框时，橙色复选框被选中

小提琴：

这是我的密码

var myApp=new Vue({
el:“#myApp”，
数据：{
清单：[
{title:'Apple'，被选中：false}，
{title:'Orange'，被选中：false}，
{标题：'Grapes'，被选中：false}
]
},
计算：{
过滤器列表：函数（）{
return u.orderBy（this.lists，['isChecked'，false]）；
}
},
方法：{
completeTask：函数（e，i）{
e、 预防默认值（）；
this.lists[i].isChecked=！this.lists[i].isChecked；
}
}
})

。已完成{
文字装饰：线条贯通；
颜色：红色；
}

{{list.title}

索引会出错，您可以通过绑定选中状态来修复它

<input type="checkbox" v-bind:checked="list.isChecked" v-bind:id="'todo-' + index" v-on:change="completeTask($event, index)" />

并将完成的任务更改为仅传入项：

<input type="checkbox" v-bind:id="'todo-' + index" v-on:change="completeTask(list)" v-bind:checked="list.isChecked" />

参见小提琴：

您应该删除“id”或使用循环索引以外的其他内容，因为重新排序时索引不会更改

使用。键唯一标识Vue中的元素。如果不使用密钥，Vue将尝试重新使用现有元素以提高性能

给Vue一个提示，以便它可以跟踪每个节点的标识，从而 重用和重新排序现有元素时，需要提供唯一的键 属性。键的理想值是唯一id 每一个项目

呈现列表时应始终使用键。这里我使用的是列表项的标题，但理想情况下应该生成一个唯一的键

<li v-for="(list, index) in filterLists" :key="list.title">

在completeTask中，检查它

completeTask: function(task){
  task.isChecked = !task.isChecked
}

最后，迭代

li

元素，而不是

ul

元素

---

更新。

您可能希望在

中放置
v-for
，而不是
，否则您将获得多个
元素

您没有提供
键
。您应该为项目提供唯一的密钥。例如，如果
标题
是唯一的，则可以将其用作
键
，或者可能需要添加另一个属性，如
id

此外，您可以将整个列表项传递给方法，而不仅仅是索引，因为在您的情况下，索引是可变的：

v-on:change="completeTask($event, list)"

这里的工作示例：
尝试将
v-for
移动到
li
，并在
li
上放置一个唯一的
key
属性（在您的情况下可以是
title
），我完全忘记了
键。这解决了问题。感谢您指出
index
问题。。它正在工作。谢谢不使用
的另一个很好的解决方案：key
。谢谢
v-on:change="completeTask($event, list)"