vue控制台报错Duplicate keys detected: ‘xxxx’. This may cause an update error.解决方案

原因分析

key值是必须唯一的，如果重复就会报错
可以把key值改为index（其实就是用索引做key值），就可以避免这个情况

解决方法

方式一

添加一个索引key即可

 <tr v-for="(item,index) in books" v-bind:key="index">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.count}}</td>
</tr>

方式二

新增或替换一个索引，通过时间戳或随机数使:key的具有唯一性

类似——Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

this.$set(el,"myID",myID)

“myID”——key，对象属性名

myID——value，属性值

动态生成随机数——避免v-for或forEach等循环时，出现重复:key=index,出现控制台标红

// 1、随机数——优选
let myID = Math.random().tostring(36).substr(2);
// 2、时间戳——遍历太快，会出现时间戳一样的情况
let myID = Date.parse(new Date())

如：

v-bind:key="index"  ==>   v-bind:key="myID"