Why won't my template update with it being bound to a computed property?
I am facing an issue where I have some template HTML in a component that relies on the computed
getter of a Vuex method. As you can see in the template, I am simply trying to show the output of the computed property in a <p>
tag with .
As I update the state with the UPDATE_EXERCISE_SETS
mutation, I can see in the Vue devtools that the state is updated correctly, but the change is not reflected in the <p> </p>
portion.
Template HTML:
<template>
...
<v-text-field
v-model="getNumSets"
placeholder="S"
type="number"
outlined
dense
></v-text-field>
<p></p>
...
</template>
Component Logic:
<script>
...
computed: {
getNumSets: {
get() {
var numSets = this.$store.getters['designer/getNumSetsForExercise']({id: this.id, parent: this.parent})
return numSets
},
set(value) { // This correctly updates the state as seen in the Vue DevTools
this.$store.commit('designer/UPDATE_EXERCISE_SETS', {
id: this.exerciseId,
parentName: this.parent,
numSets: parseInt(value),
date: this.date
})
}
}
...
</script>
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
}
})
}
}
Any insight is very appreciated!
P.S. I have also tried using a for (var i=0...)
loop, looping over the indices and then using Vue.set()
to set the value. This did update the value in the store as well, but the computed property is still not updating the template.
from Recent Questions - Stack Overflow https://ift.tt/3jnD3ay
https://ift.tt/eA8V8J
Comments
Post a Comment