老马识途

知识分享,简单就好


Tags Home

Vue2和Select2绑定问题(简单解决方式)

工作上碰到Vue和Select2结合问题,简单点,问题解决。

Vue.directive('select2', {
    twoWay: true,
    bind: function (el, binding, vnode) {
    	$(el).select2().on("select2:select", (e) => {
 			el.dispatchEvent(new Event('change', { target: e.target }));
		});
    }
});
var app = new Vue({
  el: '#app',
});
<select
      class="form-control select2-control"
      multiple="" 
      tabindex="-1"
      v-select2="category" <--主要
      v-model="category" <--主要
>
      <option :value="item_key" v-for="(item_value, item_key) in categories"></option>
</select>

上面的方法IE的时候出现问题,新的解决方法。


Vue.directive('select2', {
            twoWay: true,
            bind: function (el, binding, vnode) {
                $(el).select2().on("select2:select", function (e){
                    var detail = { target: e.target }; 
                    var event;

                    try {
                        event = new CustomEvent('change', { detail: detail });
                    } catch (e) {
                        event = document.createEvent('CustomEvent');
                        event.initCustomEvent('change', false, false, detail);
                    }



                    el.dispatchEvent(event);
                });

                $(el).select2().on("select2:unselect", function (e){
                    var detail = { target: e.target }; 
                    var event;

                    try {
                        event = new CustomEvent('change', { detail: detail });
                    } catch (e) {
                        event = document.createEvent('CustomEvent');
                        event.initCustomEvent('change', false, false, detail);
                    }
                    el.dispatchEvent(event);

                    //el.dispatchEvent(new Event('change', {target: e.target}));
                });
            }
        });