Vue.js监听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)
	}
})

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