<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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: