Unable to fix a warning Duplicate keys detected: '0'. This may cause an update error

Question

Vue js throws a warning that says vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

I tried using the getter and setter in the computed variable and dispatch the value to Vuex store.

Here is the code for the html element

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

here is the code for the computed variable

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

Here is the vuex code for updating the variable

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;
    },
    
    }
   
});
  
  
  

Here is the screenshot of error

I tried to keep the code outside the stepper and the function that calls Vuetify dialog works nicely. This problem occurs when I call the function from inside a Vuetify stepper. The code is working fine. The vuex is getting updated. The warning messages flood the console .

Somebody please suggest a way out. Thanks in advance

Answer 1

The problem was that there were 2 list rendering in the template.... In both I was using "index" for key binding as shown below

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

I changed both to

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

This fixed the issue. The reason for the warning was that I used "index" as key for both list rendering. Finally I figured it out thankfully. Just sharing this in case someone else may find it helpful.