时间戳

首页 > 解决方案 > VueJS计算属性数据绑定问题

vue.js - VueJS计算属性数据绑定问题

问题描述

https://jsfiddle.net/rohan0793/h7gn8qdv/

所以我试图用上面小提琴中的计算属性来实现一个简单的待办事项列表。有 3 个列表。所有任务。已完成的任务。未完成的任务。问题是，如果我单击未完成列表中未完成任务的复选框，或已完成列表中的完整任务，它下面的任务也会被切换。我不确定为什么会出现这种行为。是因为事件以某种方式传播吗？我也尝试@click.stop了复选框，但没有运气

标签： vue.jsvuejs2vue-component

解决方案

这里的问题是您没有key在循环中使用任何属性。key特殊属性主要用作 Vue 的虚拟 DOM 算法在将新节点列表与旧列表进行比较时识别 VNode 的提示。

在没有键的情况下，Vue 使用一种算法来最小化元素移动，并尝试尽可能多地就地修补/重用相同类型的元素。因此，您将获得以下行为：

如果我单击未完成列表中未完成任务的复选框，或已完成列表中的完整任务，它下面的任务也会被切换。

因此，要解决此问题，您只需绑定key到每个循环，例如：

<li v-for="task in incompleteTasks" :key="task.id">
   <input type="checkbox" v-model=task.completed>{{ task.description }}
</li>

使用键，它将根据键的顺序更改对元素进行重新排序，并且不再存在键的元素将始终被删除/销毁。

工作小提琴

推荐阅读