Vue 2与jquery选择

试图使用jquery -vue选择，问题是这个插件隐藏了我应用v-model的实际选择，所以当我选择一个值vue不会将它识别为选择更改事件和模型值不会更新。Vue 2与jquery选择

我已经看到了一些可供1 Vue公司的解决方案，不与Vue公司2

它显示了当前值，但不知道如何设置，使模型值的变化工作。

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");

来源

2017-06-19 Waqas

jQuery插件集成到Vue公司2的优选方法是将它们包装在组件中。下面是一个封装在处理单个和多个选择的组件中的Chosen插件示例。

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'); 
    } 
})

这是使用的模板的例子：

<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多个选择。

原来的答案

此组件不正确地处理多个选择，但在这里留下它，因为它是被接受原来的答案。

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模型。所以，你可以在你的模板中使用它像这样：

<chosen-select v-model='cities'> 
    <option value="Toronto">Toronto</option> 
    <option value="Orleans">Orleans</option> 
</chosen-select>

这是你的小提琴updated。

来源

2017-06-20 01:44:07 Bert

嗨布雷特，谢谢你的答复。我的问题是选择数据来自服务器，我无法将选择更改为选择选择。 – Waqas

@wagas你的意思是选项来自服务器？ – Bert

我正在使用Python Django，整个表单来自服务器。由于每个刷新都会更改选项内的数据。我唯一能做的就是添加像v-model等属性。 – Waqas

Vue 2与jquery选择

回答

相关问题