Vue key 报错 Duplicate keys detected: 'XXXX'. This may cause an update error.

阳光下的雨u

于 2019-07-12 14:10:18 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/smile2333/article/details/95614772

博客主要讲述浏览器报错‘Duplicate keys detected’的问题，原因是一个template中有两个一样的v-for，解决办法是修改其中一个‘key’。还提到key在HTML中v-for里的作用，即:key可解决v-for红色波浪线问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 浏览器报错： Duplicate keys detected: 'XXXX'. This may cause an update error.

原因：
一个template中有两个一样的v-for

v-for="(item, index) in currentFriend.content" :key="'index"
v-for="(item, index) in currentFriend.content" :key="'index"

解决：修改其中一个 ‘’key‘’

v-for="(item, index) in currentFriend.content" :key="'index"
v-for="(item, index) in currentFriend.content" :key="'index+'1'"

2. key 的还有一作用：

在HTML中
v-for=’(item,index) in newList(所定变量)’ ：key=‘index’ (:key可以解决v-for红色波浪线问题)