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

Question

我在 v-bind 绑定(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这是 fiddle 。

Answer 1

只需将 select 中的 v-bind 更改为 v-model 即可。

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

这里正在工作fiddle .

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