[Vue警告]:检测到重复的键:x.这可能会导致更新错误

Question

当我将项添加到具有重复ID的数组时,我一直收到错误.

即

active_widgets:Array[4]
0:Object
    id:1
    name:"Text Blocks"
    selected:false
    set:false
1:Object
    id:3
    name:"Bibliographies/References"
    selected:false
    set:false
2:Object
    id:1
    name:"Text Blocks"
    selected:false
    set:false
3:Object
    id:2
    name:"Free Text"
    selected:"Test"
    set:false

在我的场景中,'id'元素可能是重复的,因为用户可以多次在页面上拥有相同的小部件.我想知道我是否可以抑制或删除VueJS一直在控制台中抛出的警告.

Answer 1

v-for导致此警告的不同循环的相同键.您可以使用不同的键来避免这种情况v-for.

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

//here A,B's sample characters.you can take any character in that place 

Answer 2

替代方法：

将v-for元素嵌套在任何其他元素中似乎也可行。

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

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