vue使用avue框架报错之Duplicate keys detected: ‘0‘. This may cause an update error.

感觉错误场景比较冷门。

Duplicate keys detected: '0'. This may cause an update error.

这个报错多在v-for时，兄弟节点用了相同的:key导致的。

 

当前错误场景：

avue框架编写avue-crud的表格时，因后台数据id值不唯一导致的。

 

首先看调试的报错信息

 找到对应的代码位置

可以看到报错是因为key值重复导致的。

但是这个key值到底是怎么重复的呢。

根据错误栈一层层打断的最终找到报错的数据：

打开data，data中记录的是我的表哥中一行各列的数据

也就是说实际上后台数据出错了。查看后台的数据

可以看到id为0，数据库中未null，也就是在设计表时，id这列出错了。

我们将id对应修改为唯一。

 再重新查询数据，前台即正常不报错了。

但实际上我的行值并未涉及到id，为啥会因此报错呢。我尝试在后台反前台时就不传id号

可以看到渲染时，对应的key值均为undefined

 

这个时候也没有问题了，也就是说有id这个键的值avue会对其进行自动绑定，导致这个奇怪的问题。