Vue-- [Vue warn]: Duplicate keys detected: '0'. This may cause an update error

key值问题

报错信息

vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

代码

 <a-select v-model="formVals.status" style="width: 150px">
       <a-select-option value="" key="0">All</a-select-option>
       <a-select-option
               :value="item.status"
               v-for="(item, index) in statusList"
               :key="`${(index + 1)}`"
       >
           {{ item.statusText }}
       </a-select-option>
   </a-select>

问题分析

在开发过程中，使用v-for 命令出现了报错，一开始以为是为key属性赋值${(index + 1)}的写法有问题导致了重复，后来发现不是，想起曾经遇到过类似的问题，产生该报错的原因不是因为当前for循环中出现了重复的值，而是因为在页面中使用了多个v-for ，导致的在多个v-for中的项目出现key值重复，例如：

 <a-select v-model="status" style="width: 150px">
       <a-select-option value="" key="0">All</a-select-option>
       <a-select-option
               :value="item.status"
               v-for="(item, index) in statusList"
               :key="`${(index + 1)}`"
       >
           {{ item.statusText }}
       </a-select-option>
   </a-select>


<a-select v-model="name" style="width: 150px">
       <a-select-option value="" key="0">All</a-select-option>
       <a-select-option
               :value="item.userId"
               v-for="(item, index) in userList"
               :key="`${(index + 1)}`"
       >
           {{ item.name}}
       </a-select-option>
   </a-select>

我们在为:key赋值的时候可以采用多种方式：

• :key="${(index + 1)}"
• :key=“index + 1”

然而当我修改了v-for的key后仍然存在该问题,我无奈了，究竟是什么境况导致的！！！！！根本没有重复的key啦！！！

重点来了！！！！！

我不厌其烦的细细查看，然后，最后发现居然是v-for 循环中的 value是一样的！！！！！
模拟的数据重复了，这个太讨厌了！！！！！

好吧，但是报错的时候居然提示的是key值重复！！！！！