vue的data改变导致v-for中的key冲突

Question

页面刷新几次，就会报错（刷新方式：重新发送ajax请求改变data中的数据），但是有时候多刷新几次就报错有时候刷新很多次才报错：

[Vue warn]: It seems there are duplicate keys that is causing an update error. Make sure each v-for item has a unique key.

vue.esm.js?1a4e:434 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'key' of undefined"

我的问题是，每次刷新数据的时候，key也会跟着变（代码如下），我使用的key是用每个item的inedx，所以每次应该不会有冲突啊，，为什么多每次点击页面重新加载新数据就会出现错误？

    
v-for="(item2,index2) in bookrecomment_info" :book="item2" :key="index2"

Answer 1

你把key换成其他关键字试试~比如keyWords

Answer 2

将本页面所有组件的v-for中的inedx都换成每个item的id，就不报错了。。。。。。。。可能是两个组件的index冲突了，但是id在一个页面上不会有冲突·······

Answer 3

我昨天也遇到这个问题了，但是今天给解决了。原因在于JS本身值传递的特点导致的。v-for最开始是每个item都有自己的key，但是对象，数组是按引用传递的，就是内存地址是不变的，所以因为你data数据改变，但是key不变，所以在内存里就会有相同的key，所以就会报错。我的做法就是输出的时候用JSON.stringify切断原地址