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

Question

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

  <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 输入字段更改状态变量。

这是小提琴。

Answer 1

这只需更改v-bind为v-modelin即可实现select。

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

这是工作小提琴。

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