• 描述

当使用v-for循环元素时需要绑定 动态绑定:key值,有时在v-for渲染元素时会出现报错:vue warn Duplicate keys detected:'xxx' This may cause an update error,出现该问题的原因有两个:

1.没有动态绑定key值。
2.绑定的key值重复,造成key值重复的原因有:
(1)动态绑定的key值并不是唯一的标识。
(2)有时动态绑定的key值是唯一标识,需考虑可能是后台返回的唯一标识数据重复

  • 解决方案

1.为v-for循环的元素绑定:key。
2.检查绑定的:key是否唯一,或者后台返回的数据是否唯一。

  • 未绑定key出错案例

vue-json-viewer组件未绑定key:
未绑定前:出现json数据重复在面板中显示。
绑定后:json数据正常显示,重复显示的问题消失。
代码:

<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort
  :key="Date.now()"
></json-viewer>

注:关于vue-json-viewer可至开源项目了解:vue-json-viewer官网

最后修改:2021 年 10 月 14 日 05 : 10 PM
如果觉得我的文章对你有用,请随意赞赏