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

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

监听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)
?? ??? ?}
?? ?}
})

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

来源：https://blog.csdn.net/weixin_44443884/article/details/106541309