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

今天小编给大家分享一下Vue.js监听select2的值改变进行查询方式是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

监听select2的值改变进行查询

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

页面中引用select2组件

<div class="input-group input-group-sm mb-3">     <select v-select2="" v-model="ruleAndRemindType" v-on:change="getChange(ruleAndRemindType)" data-placeholder="请选择分类"  class="js-example-placeholder-multiple col-sm-12">         <option value="rule">规则设置</option>         <option value="remind">提醒设置</option>     </select> </div>

在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)     } })

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

Vue监听select的事件

<select @change="findItemNameBYClass">        <option v-for="(name,index) in findItemName" :key="index">{{name}}</option>     </select>

vue代码

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

以上就是“Vue.js监听select2的值改变进行查询方式是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。