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

监听select2的值改变进行查询

页面中引用select2组件
在js里引入如下代码：
在vue实例中使用，进行测试

监听select的事件

【Vue.js监听select2的值改变进行查询方式】
监听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的事件

vue代码