vuejs2 - [Vue 警告] : Duplicate keys detected: x. 这可能会导致更新错误

Question

当我将一个项目添加到具有重复 id 的数组时，我不断收到错误消息。

IE。

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

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

    <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