报错 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就为 abc-0 ，abc-1 ，abc-2 了，不会与上面的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

悦读