错误描述:Duplicate keys detected. This may cause an update error.
错误直译:检测到重复的键。这可能会导致错误。
错误原因:有相同父元素的多个子元素的v-for有相同的key值。
<div class="list">
<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
<span v-for="(item, index) in dataList2" :key="index">{{item.name}}</span>
</div>
因为这里我们遍历使用的key是它的 index ,也就是它的索引 0,1,2 ,所以共有2对 0,1,2 这样的index ,就出现重复了。
解决方法:
1、修改一下key值
<div class="list">
<!-- key值为0,1,2 -->
<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
<!-- 修改其中一个key值 -->
<!-- key值为a0,a1,a2 -->
<span v-for="(item, index) in dataList2" :key="'a'+index">{{item.name}}</span>
</div>
2、将它们放到不同的父元素下
<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
<div class="my-box">
<span v-for="(item, index) in dataList2" :key="index">{{item.name}}</span>
</div>
总结:
有相同父元素的子元素的key必须保持唯一性,重复的key会造成渲染错误。
要保持key的唯一性,一般使用唯一标识 id 来作为key。