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

时间:2024-04-09 14:18:40

感觉错误场景比较冷门。

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

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

 

当前错误场景:

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

 

首先看调试的报错信息

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

 找到对应的代码位置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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