Vue.js監(jiān)聽select2的值改變進(jìn)行查詢方式是什么

今天小編給大家分享一下Vue.js監(jiān)聽select2的值改變進(jìn)行查詢方式是什么的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

監(jiān)聽select2的值改變進(jìn)行查詢

由于前端項(xiàng)目使用的是Vue.js和bootstrap整合開發(fā)，中間用到了select2下拉框，今天在做查詢的時(shí)候，想根據(jù)下拉框的值變動進(jìn)行監(jiān)聽查詢，方法如下：

頁面中引用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">規(guī)則設(shè)置</option>
        <option value="remind">提醒設(shè)置</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實(shí)例中使用，進(jìn)行測試

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

因?yàn)橛玫奖O(jiān)聽值的變化進(jìn)行動態(tài)查詢，所以查詢資料找到此辦法，親測可行 

Vue監(jiān)聽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監(jiān)聽select2的值改變進(jìn)行查詢方式是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。