Vue.js監(jiān)聽select2的值改變進行查詢方式
更新時間：2022年04月07日 12:49:22 作者：A吳廣智
這篇文章主要介紹了Vue.js監(jiān)聽select2的值改變進行查詢方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
監(jiān)聽select2的值改變進行查詢
由于前端項目使用的是Vue.js和bootstrap整合開發(fā)，中間用到了select2下拉框，今天在做查詢的時候，想根據(jù)下拉框的值變動進行監(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實例中使用，進行測試
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)
?? ?}
})因為用到監(jiān)聽值的變化進行動態(tài)查詢，所以查詢資料找到此辦法，親測可行
監(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)
?? ??? ?}
?? ?}
})以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue2.0監(jiān)聽屬性的使用心得及搭配計算屬性的使用
這篇文章主要介紹了vue2.0之監(jiān)聽屬性的使用心得及搭配計算屬性的使用,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要為大家整理了7個很棒的Vue開發(fā)技巧，可以幫助大家更好的理解和使用vue框架。文中的示例代碼講解詳細，感興趣的可以了解一下2023-02-02
本篇文章主要給大家講述了VueJS應(yīng)用中管理用戶權(quán)限的詳細過程和方法，以及相關(guān)的代碼展示，需要的朋友參考下吧。2018-02-02
這篇文章主要介紹了Vue3?中的?watchEffect?特性詳解,watchEffect?是?Vue3?中非常有用的一個特性，它可以讓我們輕松地監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，并在數(shù)據(jù)發(fā)生變化時執(zhí)行指定的回調(diào)函數(shù)，從而簡化代碼并提高應(yīng)用的性能，需要的朋友可以參考下2023-04-04
axios作為Vue生態(tài)系統(tǒng)中濃墨重彩的一筆,我學習這個東西也是花了一定的時間的,下面這篇文章主要給大家介紹了關(guān)于axios和vue整合操作的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了如何使用vue自定義指令構(gòu)建拖放插件，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-04-04
vue2基本響應(yīng)式實現(xiàn)方式之讓數(shù)組也變成響應(yīng)式
這篇文章主要介紹了vue2基本響應(yīng)式實現(xiàn)方式之讓數(shù)組也變成響應(yīng)式問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了從Element日期組件源碼中學到的兩個工具方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
element修改form的el-input寬度,el-select寬度的方法實現(xiàn)
有時候像form表單這樣，頁面的input、select等寬度不一定會是一樣的，可能有些長，有些短，本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實現(xiàn)，感興趣的可以了解一下2022-02-02
實現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式
今天小編就為大家分享一篇實現(xiàn)vuex與組件data之間的數(shù)據(jù)同步更新方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11