Vue.js监听select2的值改变进行查询方式

目录

• 监听select2的值改变进行查询
• 页面中引用select2组件
• 在js里引入如下代码：
• 在vue实例中使用，进行测试
• 监听select的事件

监听select2的值改变进行查询

由于前端项目使用的是Vue.js和bootstrap整合开发，中间用到了select2下拉框，今天在做查询的时候，想根据下拉框的值变动进行监听查询，方法如下：

页面中引用select2组件

    
        规则设置
        提醒设置
    

在js里引入如下代码：

Vue.directive('select2', {
    inserted: function (el, binding, vnode) {
        let options = binding.value || {};
        $(el).select2(options).on("select2:select", (e) => {
            el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
        });
    },
    update: function (el, binding, vnode) {
        for (var i = 0; i < vnode.data.directives.length; i++) {
            if (vnode.data.directives[i].name == "model") {
                $(el).val(vnode.data.directives[i].value);
            }
        }
        $(el).trigger("change");
    }
});

在vue实例中使用，进行测试

var vm = new Vue({
    el: '#app',
    data:{
        ruleAndRemindType: 'rule'
    },
    methods: {
        //初始执行
        init() {
            this.getList('rule');
        },
        getChange: function (ruleAndRemindType) {
            this.getList(ruleAndRemindType);
        },
        getList: function(ruleAndRemindType) {
            alert(ruleAndRemindType);
        },
    },    
    mounted(){
        setTimeout(function(){
            vm.init();
        },50)
    }
})

因为用到监听值的变化进行动态查询，所以查询资料找到此办法，亲测可行 

监听select的事件

       {{name}}
    

vue代码

var vm = new Vue({
    el : '#container',
    data : {
    },
    methods:{
        findItemNameBYClass:function(e){
                console.log( e.target.value)
        }
    }
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。