解决Duplicate keys detected: ‘0‘. This may cause an update error.

在我们使用vue或者uniapp开做v-for时,可能会出现这种异常

解决Duplicate keys detected: ‘0‘. This may cause an update error.

问题产生原因分析

vue规定v-for时我们必须指定一个key,而我们习惯将遍历索引作为key来使用。而key的作用也容易被我们所忽略,key的作用简单理解就是vue为dom做的标记,当我们写如下这种代码时

解决Duplicate keys detected: ‘0‘. This may cause an update error.

即在同一个dom节点中包含了两个v-for也就出现了两个key,而这两个key都是遍历的索引,所以两个key的值会是相同的,违反了类似唯一约束的原则。

ps:很多资料说产生的原因是key的名字重复,这很扯淡。

解决方案

1、我们可以不让他们在同一个dom节点内,用一个盒子来隔离他们。

2、我们可以修改其中一个key,让他和遍历索引可以区分开,比如修改为item.id。