vue坑-vconsole.min.js?3a34:10 [Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update erro

1.问题原因

在vue中使用v-for循环时，很多人都喜欢给key值直接绑定上遍历出来的index，这个index就是数组的索引（0、1、2、3…）。但如果在同一层级里有两个数组进行遍历，并且key值都绑定为index，就会出现key值不唯一。

<template>
  <div class="secondPage">
    <!-- 同一层级dom下 -->
    <!-- 此遍历key值为0 1 2 3 4 -->
    <div class="person" v-for="(item, index) in dataList" :key="index">{{ item }}</div>
    <!-- 此遍历key值同样为0 1 2 3 4 -->
    <div class="person1" v-for="(item, index) in dataList2" :key="index">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: ["孙悟空", "猪八戒", "唐僧", "沙师弟", "白龙马"],
      dataList2: ["鲨鱼辣椒", "蟑螂恶霸", "蜘蛛侦探", "蝎子莱莱", "蜻蜓队长"]
    };
  }
};
</script>

2.解决方案

1.在v-for的外部套上一层div，从而在不同的dom层级下使用v-for。

<template>
  <div class="secondPage">
    <!-- 不同层级dom下，虽然key值还是为 0 1 2 3 4，但由于在不同层级，key为唯一标识 -->
    <div class="container">
      <div class="person" v-for="(item, index) in dataList" :key="index">{{ item + index }}</div>
    </div>
    <div class="container">
      <div class="person1" v-for="(item, index) in dataList2" :key="index">{{ item + index }}</div>
    </div>
  </div>
</template>

2.使用不同的key值