天天看点

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

首先Duplicate keys detected: '0'. This may cause an update error是vue发现key不是唯一的而引发的错误.

译为中文大概是 : 检测到重复键 : '0'. '0'可能会导致一个更新错误.

解决办法网上找的其他也有一些.通过手动进行修改:key进而解决,比如说进行拼接字符串.因为为了解决不报错,而手动修改了数据.个人感觉不应该是这样的.

最后找到的问题所在:在同一层DOM节点上,vue发现key不是唯一的.是会报错.但是如果不是在同一层DOM使用v-for循环,则不会报错.所以呢,如果不在同一层DOM上进行for循环,就可以保证了key的唯一性.(对于:key的作用还没有接触到.)

错误写法如图:

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

 更改:

[Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.
上面index+1还是会可能出现同样问题的,改index+arr5.length      
<div v-for="(item,index) in list" :key="index+1"></div>
<div v-for="(item,index) in list" :key="index+2"></div>
<div v-for="(item,index) in list" :key="index+3"></div>
<div v-for="(item,index) in list" :key="index+4"></div>
<div v-for="(item,index) in list" :key="index+5"></div>      

继续阅读