[Vue warn]: Duplicate keys detected: '1'. This may cause an update error

最新推荐文章于 2024-08-07 13:53:00 发布

weixin_30405421

最新推荐文章于 2024-08-07 13:53:00 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zwp06/p/10741487.html

本文探讨了在Vue.js中使用v-for指令时遇到的key重复问题，详细解析了两种常见场景：一是数组元素的key属性重复；二是同一数组在页面上被多次循环导致key冲突。文章提供了具体的代码示例和解决方案，帮助开发者避免因key重复引发的渲染错误。

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

今天遇到这个问题，遇到这个问题多数因为:key值的问题

第一种情况(key重复)

<div class="name-list" v-for="(item,index) in list" :key="item.sid">
    {{item.name}}
</div>

list: [
 {
     sid:1,
     name:"张三",           
 },   
 {
     sid:1,
     name:"李四",           
  },      
]

第二种情况（页面上有两个for循环同一个数组，导致key重复）

<div class="name-list" v-for="(item,index) in list" :key="index">
    {{item.name}}
</div>


<div class="name-list" v-for="(item,index) in list" :key="index">
    {{item.name}}
</div>

第二种解决

<div class="name-list" v-for="(item,index) in list" :key="index + ''_index">
    {{item.name}}
</div>


<div class="name-list" v-for="(item,index) in list" :key="'index_' + index">
    {{item.name}}
</div>