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-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

Vue中v-for=（index,item）in data :key=index,指令中的key遇到的问题:删除后成功后重新拉取数据，但是数据出现更新错误的现象相关推荐

vue页面返回消息头获取_vue在响应头response中获取自定义headers操作
日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作. 系统为了安全会 ...
angularJS在创建指令需要注意的问题(指令中使用ngRepeat)
现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http: ...
mysql查询每个id的前10条数据_解决 MySQL 比如我要拉取一个消息表中用户id为1的前10条最新数据...
我们都知道,各种主流的社交应用或者阅读应用,基本都有列表类视图,并且都有滑到底部加载更多这一功能, 对应后端就是分页拉取数据. 好处不言而喻,一般来说,这些数据项都是按时间倒序排列的,用户只关心最新的 ...
java 实现自动生成部署文档_jenkins的部署、实现自动拉取gitlab仓库代码、实现项目中代码自动部署以及项目关联触发......
jenkins主机内存和gitlab主机内存最好配置4G及以上,防止各自的web端打不开 1.配置JDK环境 1)jdk解压到此目录 [root@localhost src]# pwd /usr/lo ...
.NET Core 3.0中的WinForms创建集中式拉取请求中心
Windows 窗体(或简称 WinForms),多年来被用于开发具有丰富和交互式界面的基于 Windows 的强大应用程序. 各类企业对这些桌面应用程序的投入量非常巨大,每月有大约 240 万开发人 ...
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究在github上阅览README.md以获得最佳阅读体验,点这里 v-for响应式key ...
Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法
在系统登录到系统主页面之后,通过点击不同的菜单动态在主页面内替换相应的内容,而保持菜单栏和标题栏内容不变,可以通过以下两种方式实现,两种方式的原理都是相同的, 方式一:在路由设置时,设置一个home路 ...
vue项目如何在data里调用methods中的方法
vue项目如何在data里调用methods中的方法比如使用swiper组件在data里调用methods中函数的方式:data在vue项目里实际也是个函数,所以只要如下操作就行: data() { ...
ajax 中$.each(json,function(index,item){ }); 中的2个参数表示什么意思?
$.each(json,function(index,item) 里面的index代表当前循环到第几个索引,item表示遍历后的当前对象,比如json数据为:[{"name":&q ...

Vue中v-for=（index,item）in data :key=index,指令中的key遇到的问题:删除后成功后重新拉取数据，但是数据出现更新错误的现象

Vue中v-for=（index,item）in data :key=index,指令中的key遇到的问题:删除后成功后重新拉取数据，但是数据出现更新错误的现象相关推荐

最新文章

热门文章