如何在getues和setters中使用計算屬性來觸發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輸入字段更改狀態變量。

這是小提琴。

Answer 1

僅通過在select中將v-bind更改為v-model 。

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

這是工作的小提琴 。

如果您覺得還有更好的方法，請發表答案。