[Vue warn] :중복된 키가 검출되었습니다.x 。이로 인해 업데이트 오류가 발생할 수 있습니다.

[Vue warn] :중복된 키가 검출되었습니다.x 。이로 인해 업데이트 오류가 발생할 수 있습니다.

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' 요소가 중복될 수 있습니다.콘솔에서 VueJ가 계속 발생시키는 경고를 억제하거나 제거할 수 있는지 알고 싶습니다.

같은 키에 다른 키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 

대체 방법:

네스트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>

에 바인드해야 합니다.key독특한 가치를 가지고 있습니다.그렇지 않으면 한 개의 키가 있는 구성 요소의 데이터가 변경되면 해당 구성 요소와 다른 구성 요소가 중복 키로 업데이트될 때 응용 프로그램에 문제가 발생합니다.

의 각 항목에 고유한 키 속성을 할당해야 합니다.active_widgets키를 해당 속성에 바인드합니다.

---

코드를 전혀 보지 않고서는 당신의 고유한 사용 사례를 알 수 없습니다.그러나 어레이 내의 항목에 고유한 키 속성을 추가할 수 있는 몇 가지 방법이 있습니다.

다음 예시는 에서 이를 수행하는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++
      })
    }
  }
}

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

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

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

이 예를 사용할 수 있습니다.

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

각 어레이에 키를 추가하는 독자적인 키 기능을 만들어 이 문제를 해결했습니다.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>

언급URL : https://stackoverflow.com/questions/51086657/vue-warn-duplicate-keys-detected-x-this-may-cause-an-update-error