경고를 수정할 수 없습니다. 중복 키가 검색되었습니다: '0'.이로 인해 업데이트 오류가 발생할 수 있습니다.

경고를 수정할 수 없습니다. 중복 키가 검색되었습니다: '0'.이로 인해 업데이트 오류가 발생할 수 있습니다.

Vue js에서 vue.runtime.esm.js?2b0e:619 [Vue warn]라는 경고가 발생합니다.중복된 키 '0'이(가) 검색되었습니다.이로 인해 업데이트 오류가 발생할 수 있습니다.

계산된 변수에서 getter와 setter를 사용하여 값을 Vuex 스토어에 디스패치해 보았습니다.

다음은 html 요소의 코드입니다.

<!-- Displaying Sample TappingPessure input field-->
<v-layout 
wrap row
class="text-xs-left mx-auto pt-2"
style="height:50px;" >

...some code 

<v-flex xs12 md1 sm1 class="ma-0 pa-0"
>
    <v-text-field
    class="myfont1 inputValue"
    name="pressure" 
    id="pressure" 
    required  
    v-model="tappingPressure"
    type="number"
    reverse
    style="max-width:70px;"
        >
    </v-text-field>
</v-flex>
...some code   
</v-layout>
                                                   

다음은 계산된 변수의 코드입니다.

tappingPressure:{
                get () {
                return this.$store.getters.tappingPressure
                },
                set (value) {
                this.$store.dispatch('setTappingPressure',{data:value})
                }
            },

변수 업데이트를 위한 vuex 코드입니다.

import Vue from 'vue'
import Vuex from 'vuex'
import '@/firebase/init.js'
import  firebase from 'firebase/app'
import 'firebase/auth'


import router from "@/router.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  ...some code
  
  tappingPressure:"",
  
  ...some code
  },
  
  mutations: {
   setTappingPressure(state, payload) {
      state.tappingPressure = payload.data;
    },
    
    ...some code
  },
  
  actions: {
   setTappingPressure({
      commit
    }, payload) {
      commit("setTappingPressure", payload);
    },
    ...some code
    
   },
   
   
   getters: {
   
   tappingPressure(state) {
      return state.tappingPressure;
    },
    
    }
   
});
  
  
  

여기 오류 스크린샷이 있습니다.

코드를 스테퍼 밖에 두려고 했는데 Vuetify 대화 상자를 호출하는 기능이 잘 작동합니다.이 문제는 Vuetify 스테퍼 내부에서 함수를 호출했을 때 발생합니다.코드는 정상적으로 동작하고 있습니다.vuex가 업데이트되고 있습니다.경고 메시지가 콘솔에 플래딩됩니다.

누군가 탈출구를 제시해 주세요.잘 부탁드립니다

문제는 템플릿에 2개의 리스트 렌더링이 있다는 것입니다.둘 다 아래와 같이 키 바인딩에 "인덱스"를 사용했습니다.

v-for="(compo,index) in compoDataAz" :key="index" 
v-for="(compo, index) in analyteData" :key="index" 

둘 다로 바꿨어요.

v-for="(compo,index) in compoDataAz" :key="'compo'+index"
v-for="(compo, index) in analyteData" :key="'analyte'+index"

이것으로 문제가 해결되었습니다.경고의 이유는 두 목록 렌더링 모두 "인덱스"를 키로 사용했기 때문입니다.마침내 나는 고맙게도 그것을 알아냈다.다른 사람이 도움이 될까봐 이걸 공유하려고요.

언급URL : https://stackoverflow.com/questions/58653901/unable-to-fix-a-warning-duplicate-keys-detected-0-this-may-cause-an-update-e