• 描述

当使用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官网