Vue.js监听select2的值改变进行查询方式
作者：A吴广智
这篇文章主要介绍了Vue.js监听select2的值改变进行查询方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
监听select2的值改变进行查询
由于前端项目使用的是Vue.js和bootstrap整合开发，中间用到了select2下拉框，今天在做查询的时候，想根据下拉框的值变动进行监听查询，方法如下：
页面中引用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">规则设置</option> <option value="remind">提醒设置</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: {
//初始执行
init() {
this.getList('rule');
},
getChange: function (ruleAndRemindType) {
this.getList(ruleAndRemindType);
},
getList: function(ruleAndRemindType) {
alert(ruleAndRemindType);
},
},
mounted(){
setTimeout(function(){
vm.init();
},50)
}
})因为用到监听值的变化进行动态查询，所以查询资料找到此办法，亲测可行
监听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)
}
}
})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。