选择了 Jquery 的 Vue 2 [英] Vue 2 With Jquery Chosen
问题描述
尝试在 vue 中使用 jquery-chosen,问题是这个插件隐藏了我应用 v-model 的实际选择,所以当我选择一个值时,vue 无法将其识别为选择更改事件,而模型值是未更新.
Trying to use jquery-chosen with vue, the problem is that this plugin hides the actual select that I applied v-model, so when I select a value vue doesn't recognize it as a select change event and model value is not updated.
我看到一些适用于 Vue 1 的解决方案不适用于 Vue 2
I've seen some solution available for Vue 1 that don't work with Vue 2
它显示的是当前值,但不知道如何设置以便模型值发生变化.
It's showing the current value but doesn't know how to set so that model value changes.
Vue.directive('chosen', {
twoWay: true, // note the two-way binding
bind: function(el, binding, vnode) {
Vue.nextTick(function() {
$(el).chosen().on('change', function(e, params) {
alert(el.value);
}.bind(binding));
});
},
update: function(el) {
// note that we have to notify chosen about update
// $(el).trigger("chosen:updated");
}
});
var vm = new Vue({
data: {
cities: ''
}
}).$mount("#search-results");
推荐答案
将 jQuery 插件集成到 Vue 2 中的首选方法是将它们包装在一个组件中.以下是您的 Chosen 插件的示例,该插件包含在处理单选和多选的组件中.
The preferred method of integrating jQuery plugins into Vue 2 is to wrap them in a component. Here is an example of your Chosen plugin wrapped in a component that handles both single and multiple selects.
Vue.component("chosen-select",{
props:{
value: [String, Array],
multiple: Boolean
},
template:`<select :multiple="multiple"><slot></slot></select>`,
mounted(){
$(this.$el)
.val(this.value)
.chosen()
.on("change", e => this.$emit('input', $(this.$el).val()))
},
watch:{
value(val){
$(this.$el).val(val).trigger('chosen:updated');
}
},
destroyed() {
$(this.$el).chosen('destroy');
}
})
这是在模板中的用法示例:
And this is an example of usage in a template:
<chosen-select v-model='cities' multiple>
<option value="Toronto">Toronto</option>
<option value="Orleans">Orleans</option>
<option value="Denver">Denver</option>
</chosen-select>
<chosen-select v-model='cities2'>
<option value="Toronto">Toronto</option>
<option value="Orleans">Orleans</option>
<option value="Denver">Denver</option>
</chosen-select>
Fiddle 用于多选.
原答案
这个组件不能正确处理多选,而是把它留在这里,因为它是被接受的原始答案.
This component doesn't handle multiple selects correctly, but leaving it here because it was the original answer that was accepted.
Vue.component("chosen-select",{
props:["value"],
template:`<select class="cs-select" :value="value"><slot></slot></select>`,
mounted(){
$(this.$el)
.chosen()
.on("change", () => this.$emit('input', $(this.$el).val()))
}
})
该组件支持 v-model.这样您就可以像这样在模板中使用它:
This component supports v-model. So that you can use it in your template like so:
<chosen-select v-model='cities'>
<option value="Toronto">Toronto</option>
<option value="Orleans">Orleans</option>
</chosen-select>
这是你的小提琴更新.
这篇关于选择了 Jquery 的 Vue 2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!