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

您需要使用唯一值绑定到key。如果不这样做，则使用一个键的组件的数据更改会更新该组件，而使用重复键的另一个组件会导致应用程序出现问题。

您应该为active_widgets数组中的每个项目分配唯一的键属性，然后将键绑定到该属性。

没有看到您的任何代码，我不知道您的独特用例是什么。但是，您可以通过以下几种方法向数组中的项目添加唯一的key属性。

下面是在created方法中执行此操作的示例。

created() {
  this.active_widgets.forEach((item, index) => this.$set(item, 'key', index));
}

如果在将项目添加到此数组时需要添加唯一键，则可以维护一个计数器，并在每次添加时将其递增：

let WidgetCount = 0;

export default {
  data() {
    return { active_widgets: [] }
  },
  methods: {
    addWidget(id, name) {
      this.active_widgets.push({ 
        id, 
        name, 
        selected: false,
        set: false, 
        key: WidgetCount++
      })
    }
  }
}

Answer 3

另一种方法：

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

Answer 4

我通过创建一个唯一的键函数来向每个数组添加键来解决了这个问题。然后在v-for中将其用作键...

<div
            class="postBlob"
            v-for="{
              key,
              user,
              post,
              dateTime
            } in localPostData.slice().reverse()"
            :key="key"
          >
            <strong class="userBlobIndy">{{ user }} </strong>
            <h2 class="postBlobIndy">
              {{ post }}
              <p>{{ dateTime }}</p>
            </h2>
          </div>

Answer 5

<template v-for="it in items">
    <li :key="it.id + '-name'">{{it.name}}</li>
</template>

https://github.com/vuejs/vue/issues/7323

Answer 6

<div v-for="(data, index)" in active_widgets" :key="index"> 
   {{data.id}}
   {{data.name}}
   {{data.selected}}
   {{data.set}}
</div>

Answer 7

这是您在 :key 中的数据的问题，只传递那些在每一行中都是唯一的变量，例如 id 或任何其他数据

<tr v-for="list in userTask" :key="list.id" class="trHover">

在我的情况下，每行的 list.id 值都是唯一的

Answer 8

你可以使用这个例子

<template>
    <div  >
      
       <div v-for="categori in blogs"   id="blog-body" :key="categori.title" >

    <h2 >{{categori.title}}</h2>
    <h3>{{categori.contact }}</h3>
      
       </div>

    </div>
    
</template>
<script>
export default {
    data(){
        return{
            blogs:[
                {title:'this is title 1',contact : ' this is contact for test javascript'},
                {title:'this new title ',contact : ' this is contact for vue'},
                {title:'this is new title 2',contact : ' this is contact for  vue js'}
            ]
          
        }
    },
   
   
    }

</script>

[Vue警告]：检测到重复的密钥：x。这可能会导致更新错误

8 个答案: