使用jquery-selected插件更新vuejs模型值

试图使用 jquery-chosen与vue,问题是这个插件隐藏了我应用v-model的实际选择,所以当我选择一个值时,vue不会将其识别为select change事件,并且模型值不会更新.

当我选择某些东西时,select的值实际上正在改变,我已经使用console.log检查了它以查看所选的值.

http://jsfiddle.net/qfy6s9Lj/3/

我可以做vm.$data.city = $(‘.cs-select’).val(),that似乎工作,
但还有另一种选择吗？如果select的值被更改,为什么vue没有看到这个？

解决方法

回答：
http://jsfiddle.net/qfy6s9Lj/5/

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

更新：更好的解决方案(感谢simplesmiler)：
http://jsfiddle.net/simplesmiler/qfy6s9Lj/8/