How to use computed property with getters and setters to trigger commit in Vuex

Question

I am using a computed property: category in an input field bound by v-bind like following:

  <select name="Category" :value="category">
    <option value="AC">AC</option>
    <option value="TV">TV</option>
    ...
  </select>

and I have getters and setter for this computed property as follows:

computed:{
    category: {
      get () {
        return this.$store.state.category
      },
      set (value) {
        console.log("Value of category changed")
        this.store.commit("SET_CAT", value)
      }
    }
}

But when I change input, setter does not get called, How can I achived this, or what other way can be to change state variable directly from HTML input field.

Here is fiddle for this.

I noticed in your 'set' function, you have this.store not this.$store.commit... that might also be an issue. — PatrickCurl

Saurabh Saurabh · Accepted Answer · 2016-11-10T12:14:45

This worked just by change v-bind to v-model in select.

<select name="Category" v-model="category">
  <option value="" disabled hidden>Select Product</option>
  ....

Here is working fiddle.

Please post answer if you feel there is still some better way to do it.

How to use computed property with getters and setters to trigger commit in Vuex

1 Answers