Listen to the change of select2 value for query
Since the front-end project uses integrated development with bootstrap, the select2 drop-down box is used in the middle. When doing the query today, I want to listen to the query according to the value changes of the drop-down box. The method is as follows:
Refer to the select2 component in the page
<div class="input-group input-group-sm mb-3"> <select v-select2="" v-model="ruleAndRemindType" v-on:change="getChange(ruleAndRemindType)" data-placeholder="Please select a category" class="js-example-placeholder-multiple col-sm-12"> <option value="rule">Rule settings</option> <option value="remind">Reminder settings</option> </select> </div>
Introduce the following code in js:
('select2', {
inserted: function (el, binding, vnode) {
let options = || {};
$(el).select2(options).on("select2:select", (e) => {
(new Event('change', {target: })); //The two-way binding that was agreed upon was not a problem });
},
update: function (el, binding, vnode) {
for (var i = 0; i < ; i++) {
if ([i].name == "model") {
$(el).val([i].value);
}
}
$(el).trigger("change");
}
});Use in vue instances to test
var vm = new Vue({
el: '#app',
data:{
ruleAndRemindType: 'rule'
},
methods: {
//Initial execution init() {
('rule');
},
getChange: function (ruleAndRemindType) {
(ruleAndRemindType);
},
getList: function(ruleAndRemindType) {
alert(ruleAndRemindType);
},
},
mounted(){
setTimeout(function(){
();
},50)
}
})Because the changes in the listening value are used for dynamic query, it is feasible to find this method in querying information.
Listen to select events
<select @change="findItemNameBYClass">
<option v-for="(name,index) in findItemName" :key="index">{{name}}</option>
</select>vue code
var vm = new Vue({
el : '#container',
data : {
},
methods:{
findItemNameBYClass:function(e){
( )
}
}
})The above is personal experience. I hope you can give you a reference and I hope you can support me more.