Vue 2 Jquery Chosenで

Question

vueでjquery-selectedを使用しようとすると、問題は、このプラグインがv-modelを適用した実際の選択を隠しているためです。値を選択すると、vueはそれを選択変更イベントとモデル値は更新されません。

私はそれが現在の値を示していますが、そのためのモデル値の変更を設定する方法を知りませんVueの2

では動作しませんVueの1のために利用できるいくつかのソリューションを見てきました。

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

ヴュー2にjQueryのプラグインを統合するための好ましい方法は、構成要素でそれらを包むことです。ここでは、単一選択と複数選択の両方を処理するコンポーネントにラップされたChosenプラグインの例を示します。複数選択のための

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

は、これはテンプレートでの使用の一例です。

オリジナル回答

このコンポーネントが正しく、複数の選択を扱うが、それが受理されたオリジナルの答えだったので、ここでそれを残していません。

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をサポートしています。あなたはそのようなあなたのテンプレートで使用できるように：

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

をここにあなたのフィドルupdatedです。