Encountered a warning in Vue js stating 'Duplicate keys detected: '0'. This warning could potentially lead to an update error.
To resolve this issue, I utilized the getter and setter in the computed variable and dispatched the value to Vuex store.
Below is the HTML code snippet for displaying a sample TappingPressure input field:
<!-- Displaying Sample TappingPressure 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>
Computed variable code snippet:
tappingPressure:{
get () {
return this.$store.getters.tappingPressure
},
set (value) {
this.$store.dispatch('setTappingPressure',{data:value})
}
},Vuex code snippet 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;
},
}
});
Screenshot of the error can be viewed here.
Encountering the error specifically when calling a function within a Vuetify stepper. Nonetheless, the code functions appropriately and Vuex gets updated despite the flood of warning messages in the console.
If anyone has a solution or suggestion, it would be greatly appreciated. Thank you in advance.