无法修复警告检测到重复键：“0”。这可能会导致更新错误

Question

Vue js 抛出警告说 vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '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 正在更新。警告消息充斥着控制台。

请有人提出一条出路。提前致谢

Answer 1

问题是模板中有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"

这解决了问题。警告的原因是我使用“索引”作为两个列表渲染的键。最后我很庆幸自己想通了。只是分享这个以防其他人发现它有帮助。