本文探讨了Vue.js中使用v-for指令时遇到的元素删除问题及背后的原因。当通过v-for渲染列表并尝试删除其中的元素时，Vue默认采用‘就地复用’策略，这可能导致UI更新不准确。文章详细解释了如何通过为每个元素设置唯一的key属性来解决此问题，以实现正确的元素追踪和重用。
-
删除前
2.删除第二个后
-
现象
2.1 少了一个，第一位无任何变化；
2.2 第二个的id变了其它无任何变化；
2.3 本来删除的第二个，但是消失的确实第三个 -
原因分析
3.1 v-for中的key：
v-for循环数据，当用for来更新已经被渲染的元素时，vue的“就地复用”策略，是不会改变数据项的顺序的，如果想要重新排序，需要为每项添加key（也就是每项的唯一id）
当使用v-for正在更新已渲染的元素列表时，它默认使用“就地复用”策略。如果数据项的顺序被改变，vue将不是移动元素来匹配数据的顺序，而是简单的复用此处的每个元素，并且确保他在特定索引下显示已被渲染过的每个元素。经常在列表渲染输出中使用。 -
解决
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。
<div v-for="item in items" :key="item.id"> </div>
- 参考https://blog.csdn.net/weixin_38098192/article/details/80319958
扫一扫
1723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
