如何使用带有 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 是 fiddle。

Answer 1

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

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

这里正在工作fiddle。

如果您觉得还有更好的方法，请post回答。

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

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

javascript

vuex

vue.js

vuejs2

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

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

javascript

vuex

vue.js

vuejs2

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