报错： Duplicate keys detected 重复key报错问题

错误描述：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。