I have integrated a computed property called category in an input field that is bound with v-bind. See the code snippet below:
<select name="Category" :value="category">
<option value="AC">AC</option>
<option value="TV">TV</option>
...
</select>
In order to handle this computed property, I have defined getters and setters as shown below:
computed:{
category: {
get () {
return this.$store.state.category
},
set (value) {
console.log("Value of category changed")
this.store.commit("SET_CAT", value)
}
}
}
However, I encountered an issue where the setter is not being called when I change the input field. How can I address this problem or what alternative approach can I take to update the state variable directly from the HTML input field?
You can find a working example on this fiddle link.