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