Javascript 将Select2 select绑定到Vue js模型数据

我正在使用select2来增强html select元素。我想将select元素的值绑定到Vue变量，但是Select2似乎阻止了这一点

在保持Select2行为的同时，实现此数据绑定和事件侦听的最佳方法是什么。我想这是一个将select2事件链接到Vue实例的例子

我已经演示了这个问题（下面没有运行，但可以在JSFIDLE上运行）：

$（'#things'）。选择2（）；
新Vue({
el:“vue示例”，
数据：{
东西：空，
thing2:null
},
方法：{
日志：函数（str）{
$（'#log'）。追加（str+“
”）；
}
}
});
选择{
宽度：50%；
}

选择2选择框
一个
两个
三
四
五




本机选择框
一个
两个
三
四
五
{{$data | json}
此解决方案适用于所选插件，但您可以使用Select2执行相同的操作以使其正常工作：


几天前我为select2制作了一个插件


希望有帮助
 斯威夫特的回答是正确的。您只需要识别并更新代码，以反映Select2中的差异



Vue.directive（'selecttwo'{
双向：对，
绑定：函数（）{
$（this.el）。选择2（）
.打开（“选择2：选择”，功能（e）{
this.set（$（this.el）.val（））；
}.约束（这个）；
},
更新：功能（nv、ov）{
$（this.el）.触发器（“更改”）；
}
});
新Vue({
el:“vue示例”，
数据：{
东西：空，
thing2:null
},
方法：{
日志：函数（str）{
$（'#log'）。追加（str+“
”）；
}
}
});
选择{
宽度：50%；
}

选择2选择框
一个
两个
三
四
五




本机选择框
一个
两个
三
四
五
{{$data | json}
较短的解决方案：

Trae的回答很好，但是该值已经存储在select元素上，所以您所要做的就是发送事件，让Vue知道我们已经更改了它

只要简单地做：


...
虽然这可能有效，但问题是关于Select2的，Select2和Selected之间有足够的区别，不清楚需要做什么更改。很容易看出需要做什么更改。考虑下面的选项：{SnimiTyStultStOrgs:Trtrue，宽度：“30%”，Dabable SalkHyLoad：999 }这些是要选择的参数。只需将其替换为要选择的参数2。唯一需要替换的是行$（this.el）.trigger（“selected:updated”）；，必须将其替换为通知Select2更新的代码。这是Select2问题，不是SELECT。此代码需要进行哪些更改才能与Select2配合使用？请检查此解决方案：
Vue.directive('chosen', {
    twoWay: true, // note the two-way binding
    bind: function () {
        $(this.el)
            .chosen({
                inherit_select_classes: true,
                width: '30%',
                disable_search_threshold: 999
            })
            .change(function(ev) {
                // two-way set
                this.set(this.el.value);
            }.bind(this));
    },
    update: function(nv, ov) {
        // note that we have to notify chosen about update
        $(this.el).trigger("chosen:updated");
    }
});

var vm = new Vue({
  data: {
      city: 'Toronto',
      cities: [{text: 'Toronto', value: 'Toronto'}, 
               {text: 'Orleans', value: 'Orleans'}]
  }
}).$mount("#search-results");

Vue.directive('select2', {
    inserted(el) {
        $(el).on('select2:select', () => {
            const event = new Event('change', { bubbles: true, cancelable: true });
            el.dispatchEvent(event);
        });

        $(el).on('select2:unselect', () => {
            const event = new Event('change', {bubbles: true, cancelable: true})
            el.dispatchEvent(event)
        })
    },
});

<select v-model="myprop" v-select2>
...