Currently, I am encountering an issue where a component's template HTML depends on the computed getter of a Vuex method. The template is designed to display the output of the computed property within a <p> tag using {{ getNumSets }}.
Upon updating the state with the UPDATE_EXERCISE_SETS mutation, I can verify through Vue devtools that the state updates correctly. However, this change is not reflected in the
<p> {{ getNumSets }} </p>Below is the snippet of the Template HTML:
<template>
...
<v-text-field
v-model="getNumSets"
placeholder="S"
type="number"
outlined
dense
></v-text-field>
<p>{{ getNumSets }}</p>
...
</template>
The Component Logic portion looks like this:
<script>
...
computed: {
getNumSets: {
get() {
var numSets = this.$store.getters['designer/getNumSetsForExercise']({id: this.id, parent: this.parent})
return numSets
},
set(value) { // This successfully updates the state according to Vue DevTools
this.$store.commit('designer/UPDATE_EXERCISE_SETS', {
id: this.exerciseId,
parentName: this.parent,
numSets: parseInt(value),
date: this.date
})
}
}
...
</script>
Concerning the Vuex Store Logic:
...
state: {
designerBucket: []
},
getters: {
getNumSetsForExercise: (state) => (payload) => {
var numSets = 0
for (var i = 0; i < state.designerBucket.length; i++) {
if (state.designerBucket[i].id == payload.id) {
numSets = state.designerBucket[i].numSets
}
}
return numSets
}
},
mutations: {
UPDATE_EXERCISE_SETS(state, payload) {
state.designerBucket.forEach(exercise => {
if (exercise.id == payload.id) {
exercise.numSets = payload.numSets
}
})
}
}
Your insights and suggestions are highly appreciated!
P.S. I have also experimented with utilizing a for (var i=0...) loop, iterating over indices, and then implementing Vue.set() to update the value. Although this approach did modify the store value, the computed property still fails to update the template accordingly.