Coordinating input elements with object keys in Vuex state is my current challenge. Imagine I have this object:
myObj: { foo: 1, bar: 2 }
Within a component, I have a computed property set up like so:
myObjVals: {
get(){ return this.$store.state.myObj },
set(//?) { //? },
},
In the template, accessing values from the store works fine:
<input type="number" v-model="myObjVals['foo']"/> // shows "1"
<input type="number" v-model="myObjVals['bar']"/> // shows "2"
However, trying to modify the value of an input triggers the error message: "Do not mutate vuex store state outside mutation handlers."
One solution would involve creating a dedicated computed property for each key in myObj, but this approach becomes cumbersome for larger objects. I'm exploring if it's possible to achieve the same functionality as described above using just one computed property to handle both the get and set functions in v-model.