Vue中v-for=(index,item)in data :key=index,指令中的key遇到的问题:删除后成功后重新拉取数据,但是数据出现更新错误的现象
删除前2.删除第二个后现象2.1 少了一个,第一位无任何变化;2.2 第二个的id变了其它无任何变化;2.3 本来删除的第二个,但是消失的确实第三个原因分析3.1 v-for中的key:v-for循环数据,当用for来更新已经被渲染的元素时,vue的“就地复用”策略,是不会改变数据项的顺序的,如果想要重新排序,需要为每项添加key(也就是每项的唯一id)当使用v-...
·
-
删除前
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
更多推荐
已为社区贡献13条内容
所有评论(0)