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

时间:2021-10-15 07:14:38

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

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

第一种情况(key重复)

<div class="name-list" v-for="(item,index) in list" :key="item.sid">
{{item.name}}
</div>
list: [
{
sid:,
name:"张三",
},
{
sid:,
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>

1.解决这些问题找到其根源就好了。祝大家撸码之路顺畅无阻、