select2 值未更新答案

【问题标题】：select2 value not updatedselect2 值未更新
【发布时间】：2019-04-10 00:27:00
【问题描述】：

我正在使用 Vue 2.5.17 和 Select2 4.0.6-rc.1。

我有一个可以选择选项的输入字段。我想将选定的选项传递给商店对象。

这是组件中的代码：

<select2 type="text" :options="bereiche" v-model="bereichInput" class="form-control">

(..)

computed: {
    bereichInput:{
        get () {
            return this.$store.state.bereichInputStore
        },
        set (value) {
            console.log("value="+value+"!");
            this.$store.commit('setBereichInput', value)
        }
    }
}

这是商店里的代码：

setBereichInput(state, bereichInput)
      {
        state.bereichInputStore = bereichInput;
        console.log("Test bereich"+state.bereichInputStore+"!!!!");
      }

当我测试 ist 时，我在控制台中收到以下消息：

“测试 bereich!!!!” 因此，什么都没有通过！

我做错了什么？

提前致谢！！

【问题讨论】：

我还没有与商店合作，但 select2 选项不直接由 DOM 处理，因此选项更改不会触发本机浏览器“开启”事物（有史以来最好的解释）。希望我的理解是正确的。
我的解决方案是制作自己的 select2 组件。看看我的：gist.github.com/Fusseldieb/0e2bd6af4579a37cb1dabdd8866a80b5
我刚刚更新了要点（再次）。现在应该可以使用了。

标签： select vue.js jquery-select2

【解决方案1】：

在使用该组件时，您不能将v-model 与vuex 一起使用。您需要自己处理值的更改，并使用:value 进行绑定捕获@input 以确定值何时更改。观察：

<select2 @input="updateBereiche"
         :options="bereiche"
         :value="bereichInput" 
         class="form-control">

然后你要添加一个名为updateBereiche的新方法

methods: {
  updateBereiche(value) {
      this.$store.commit('setBereichInput', value)
  }
}

删除你的setter，它不再需要了。

【讨论】：