如何使用getter和setter的计算属性来触发Vuex中的提交

Question

我在v-bind绑定的输入字段中使用了一个计算属性：category，如下所示：

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

我有这个计算属性的getter和setter，如下所示：

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

但是当我更改输入时，setter不会被调用，我怎样才能实现这个，或者可以用其他方式直接从HTML输入字段更改状态变量。

Here对此无动于衷。

Answer 1

仅在v-bind中将v-model更改为select时才有效。

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

以下是fiddle。

如果你觉得还有更好的方法，请发表答案。