vue key值的重复键问题报错

Posted 2021-02-06 codebook

1.问题描述：在vue2.0+ 中做一个公用的评论组件，:key使用的时创建评论的时间，当加载更多的时候，会报错：

Duplicate keys detected: ‘2019-01-24T07:15:35.000Z‘.This may cause an update error. 

2. 出问题的代码部分：

<li v-for="(item, i) in cmtList" :key="item.createTime"></li>

3. 分析问题：

由于多人可以同时发表评论，如果是时间完全相同就会出现这样的警告！！！

不同的v-for循环使用了相同的key值造成了这个警告，为了避免由于相同的key值造成的警告，可以使用以下方法：

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="‘A‘+ i"></div>

<div v-for="(item, i) in items3" :key="‘B‘,+ i"></div>

//这里例子中的 A,B 字符可以替换成你自己定义的任意字符，只是为了保证key的唯一性

4. 备注

参考：https://stackoverflow.com/questions/51086657/vue-warn-duplicate-keys-detected-x-this-may-cause-an-update-error