Vue.js 使用 jquerychosen 插件更新 vuejs 模型值

发布于07月22日

try 在vue中使用jquery-chosen时，问题是该插件隐藏了我应用v-model的实际 Select ，因此当我 Select 一个值时，vue不会将其识别为 Select 更改事件，并且不会更新模型值.

实际上，当我 Select 某个东西时，select的值正在改变，我已经用console判断过了.记录以查看所选值.

我能做that，vm.$data.city = $('.cs-select').val()，

推荐答案

答复:

<div id='search-results'>
    Vue model value <br>
    {{city}}
    <hr>
    Select value:
    <select class="cs-select" v-chosen>
       <option value="Toronto">Toronto</option>
       <option value="Orleans">Orleans</option>
    </select>
</div>

Vue.directive('chosen', {
    bind: function () {
        var vm = this.vm;
        this.el.options = vm.cities;
        this.el.value = vm.city;       

        $(this.el).chosen({
            inherit_select_classes: true,
            width: '30%',
            disable_search_threshold: 999})
        .change( function() {
             vm.city = this.el.value;
         }.bind(this)
      );
    }
});

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

UPDATE: an even better solution(感谢simplesmiler):