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

时间 2019-12-11

标签 vue warn duplicate keys detected cause update error 繁體版

原文原文链接

今天遇到这个问题，遇到这个问题多数由于:key值的问题数组

第一种状况(key重复)spa

<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重复）code

<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>

第二种解决blog

<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>

1.解决这些问题找到其根源就行了。祝你们撸码之路顺畅无阻、it