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