报错 Duplicate keys detected

错误描述：Duplicate keys detected. This may cause an update error.
错误直译：检测到重复的键。这可能会导致错误。
错误原因：有相同父元素的多个子元素的v-for有相同的key值。

错误重现步骤:

dataList: [{ id: 1, name: 'A' },{ id: 2, name: 'B' },{ id: 3, name: 'C' }]

<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
<hr />  <!-- 分割线 -->
<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>

可以看到控制台把所有重复的key都打出来了。因为这里我们遍历使用的key是它的 index ，也就是它的索引 0，1，2 ，所以共有2对 0，1，2 这样的index ，就出现重复了。

解决方法
（1）将其中一个的key修改一下：

<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
<hr />  <!-- 分割线 -->
<span v-for="(item, index) in dataList" :key=`abc-${index}`>{{item.name}}</span>

这里将第二个便利中的key加上了前缀 abc，这样一来它的key就为 aa-1 ，aa-2 ，aa-3 了，不会与上面的0，1，2 重复了。
（2）将它们放到不同的父元素下

<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
<hr />  <!-- 分割线 -->
<div class="my-container"><span v-for="(item, index) in dataList" :key=index>{{item.name}}</span>
</div>

总结：
有相同父元素的子元素的key必须保持唯一性，重复的key会造成渲染错误。
要保持key的唯一性，一般使用唯一标识 id 来作为key。

报错 Duplicate keys detected相关推荐

vue控制台报错Duplicate keys detected: 'xxxx'. This may cause an update error.解决方案
key值是必须唯一的,如果重复就会报错可以把key值改为index(其实就是用索引做key值),就可以避免这个情况添加一个索引key即可 <tr v-for="(item,inde ...
vue控制台报错Duplicate keys detected：‘xxxx‘.This may canse an update error
场景:一打开页面就报这个错误,但是丝毫不影响页面和其他功能,虽然不影响使用,但是报错还是要解决的. 原因就是:v-for循环里,key值重复了,key值必须是唯一的,如果重复就会报错,找到页面把 :k ...
Vue报错Duplicate keys found unique.
报错详情可能一. 同级中只有一个v-for 但是这个for循环中的:key重复了可能二. 同级中有两个v-for 两个for循环中的key重复了可能三. 存在v-if 我也不知道咋回事,删掉或者 ...
Vue报错： [Vue warn]: Duplicate keys detected: ‘5‘. This may cause an update
背景: 功能能够实现,但是控制台报如下错误: [Vue warn]: Duplicate keys detected: '5'. This may cause an update error. 原因 ...
Duplicate keys detected: ‘0‘Duplicate keys detected: ‘1‘报错的原因及解决方法
打印台报红显示: Duplicate keys detected: '0'. This may cause an update error. Duplicate keys detected: '1'. ...
[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循环哪 ...
Duplicate keys detected: '0'. This may cause an update error.
运行vue项目的时候,出现了[Vue warn]: Duplicate keys detected: '0'. This may cause an update error(错误,检测到重复的key值 ...
Duplicate keys detected: ‘checks‘. This may cause an update error. found in
Duplicate keys detected: 'checks'. This may cause an update error. 1.怎么查看报错 2.分析报错的原因 3.怎么修改这样的报错 4. ...
Duplicate keys detected: ‘gggggg‘. This may cause an update error.的解决办法
vue项目中报了一个这样的错:Duplicate keys detected: 'gggggg'. This may cause an update error. 虽然不影响使用吧,但是一直冒红也不太 ...
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 ...

报错 Duplicate keys detected

报错 Duplicate keys detected相关推荐

最新文章

热门文章