Vue 2與jquery選擇

Question

試圖使用jquery -vue選擇，問題是這個插件隱藏了我應用v-model的實際選擇，所以當我選擇一個值vue不會將它識別爲選擇更改事件和模型值不會更新。

我已經看到了一些可供1 Vue公司的解決方案，不與Vue公司2

它顯示了當前值，但不知道如何設置，使模型值的變化工作。

http://jsfiddle.net/q21ygz3h/

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

Answer 1

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。