vue中 v-for 循环中 key 值的唯一性

问题描述:

浏览器端出现红色警告:Duplicate keys detected: ‘0’. This may cause an update error :

在这里插入图片描述


项目场景

同一个模板里,同级for循环,有两个v-for,:key都用的是遍历得到的索引

原因分析:

问题分析:

原因:同一个模板里,同级for循环,有两个v-for, :key 都用的是遍历得到的索引, :key 值重复导致的,给他们其中一个的key赋个不同的值区分一下就好了。
在这里插入图片描述


解决方案:

提示:这里填写该问题的具体解决方案:
在这里插入图片描述

1、我们可以用一个盒子来隔离他们,这样就可以不让他们在同一个dom节点内。

2、我们可以修改其中一个key,让他和遍历索引可以区分开,比如修改为item.id , index.lable, index + ‘a’ 等等,保证得到索引值不会出现完全相同的值即可。

注意:保证key为唯一即可。

猜你喜欢

转载自blog.csdn.net/YHLSunshine/article/details/125282542