Vue报错： [Vue warn]: Duplicate keys detected: ‘5‘. This may cause an update

背景：

功能能够实现，但是控制台报如下错误：

[Vue warn]: Duplicate keys detected: '5'. This may cause an update error.

原因：

查阅Vue文档可知，有相同父元素的子元素必须有独特的key。重复的 key 会造成渲染错误

意思就是说使用v-for时，里面绑定的key值有重复的key值，导致报错。

找到组件所在使用的v-for的地方，看到代码如下：key动态绑定了slide.skuId

 <div class="swiper-slide" v-for="(slide,index) in skuImageList" :key="slide.skuId"><img :src="slide.imgUrl">
</div>

那么slide.skuId是不是有重复的值呢？借助开发者工具，查看slide.skuId的值。可以看见slide.skuId果然有重复的。

解决办法

使用索引值index作为key值即可解决

参考文档链接：https://www.cnblogs.com/websnow/p/16015913.html

Vue报错： [Vue warn]: Duplicate keys detected: ‘5‘. This may cause an update相关推荐

[Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.
[Vue warn]: Duplicate keys detected: '0'. This may cause an update error. 刚开始看到这个问题我还有点奇怪,因为只在for循环哪 ...
vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: ‘/carsend‘. This may cause an update err
背景: 在运行一个Vue项目时,出现了如下报错信息 vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: '/carsend'. Th ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ‘xxx‘. This may cause an update err
vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: 'xxx'. This may cause an update err ...
[Vue warn]: Duplicate keys detected: '0'. This may cause an update error. found in解决办法
在vue项目中出现以下报错: 错误原因:一个template中有两个一样的v-for, key属性冲突导致解决方法: 在第二个v-for中, key属性设置一下即可: :key="inde ...
vue坑-vconsole.min.js?3a34:10 [Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update erro
报错原因是key值不唯一 1.问题原因 2.解决方案 1.问题原因在vue中使用v-for循环时,很多人都喜欢给key值直接绑定上遍历出来的index,这个index就是数组的索引(0.1.2.3- ...
[Vue warn]: Duplicate keys detected: ‘user‘. This may cause an update error. 解决方法
问题描述页面产生十几个这种报错问题原因一开始控制台全爆红 ,我也不知道这是什么错误 ,百度上查看的全是说 v-for 的 key 绑定的值重复,但是我反复查看了页面中使用的 v-for ...
工作194:vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ‘/system‘. This may cause an
错误如下拿到公司一个小哥哥的代码,一来就报了一堆bug,吓得我先写一篇博客vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detecte ...
Duplicate keys detected: '0'. This may cause an update error.
运行vue项目的时候,出现了[Vue warn]: Duplicate keys detected: '0'. This may cause an update error(错误,检测到重复的key值 ...
Vue中报“Duplicate keys detected: ‘xxx‘. This may cause an update error.”的解决办法
在Vue中遇到"Duplicate keys detected: 'xxx'. This may cause an update error."这样的错误提示,最有用的解决办法,亲 ...

Vue报错： [Vue warn]: Duplicate keys detected: ‘5‘. This may cause an update

Vue报错： [Vue warn]: Duplicate keys detected: ‘5‘. This may cause an update相关推荐

最新文章

热门文章