试图使用
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/
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/