时间戳

首页 > 解决方案 > [Vue 警告]：检测到重复键：x。这可能会导致更新错误

vuejs2 - [Vue 警告]：检测到重复键：x。这可能会导致更新错误

问题描述

当我将一个项目添加到具有重复 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 不断在控制台中抛出的警告。

标签： vuejs2

解决方案

导致此警告的不同循环的相同键。您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

推荐阅读