Question

Vue js发出警告，提示vue.runtime.esm.js？2b0e：619 [Vue警告]：检测到重复的密钥：'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;
    },
    
    }
   
});

这是错误的屏幕截图 https://cli.vuejs.org/guide/deployment.html#github-pages

我试图将代码保留在步进器之外，并且调用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"

此问题已解决。警告的原因是我使用“索引”作为两个列表呈现的键。最后，我很庆幸地弄明白了。只是分享一下，以防其他人发现它有帮助。

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

1 个答案: