编程语言
首页 > 编程语言> > javascript-如何在getue和setter中使用计算属性来触发Vuex中的提交

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

作者:互联网

我正在使用计算属性:由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输入字段更改状态变量.

Here为此而摆弄.

解决方法:

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

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

这是工作fiddle.

如果您觉得还有更好的方法,请发表答案.

标签:vuex,vue-js,vuejs2,javascript
来源: https://codeday.me/bug/20191118/2024617.html