[Vue 警告]:检测到重复键:x.这可能会导致更新错误 [英] [Vue warn]: Duplicate keys detected: x. This may cause an update error

问题描述

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

即

active_widgets:Array[4]0:对象编号:1名称:文本块"选择:假设置:假1:对象编号:3名称:参考书目/参考文献"选择:假设置:假2:对象编号:1名称:文本块"选择:假设置:假3:对象编号:2名称:自由文本"选择:测试"设置:假

在我的场景中，id"元素可能是重复的，因为用户可以在页面上多次使用相同的小部件.我想知道我是否可以取消或删除VueJS不断在控制台中抛出的警告.

解决方案

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

 
//这里A，B的样本字符.你可以在那个地方取任何字符

I keep getting an error when I add an item to the array which has duplicate id.

i.e.

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

In my scenario, 'id' element may be duplicate because the user can have the same widget on the page multiple times. I want to know if I can suppress or remove the warning that VueJS keeps throwing in the console.

解决方案

Same key for different v-for loops causing this warning.you can avoid this using different key for different v-for loops.

    <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 

这篇关于[Vue 警告]:检测到重复键:x.这可能会导致更新错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！