Vue.js监听select2的值改变进行查询方式
目录
- 监听select2的值改变进行查询
- 页面中引用select2组件
- 在js里引入如下代码:
- 在vue实例中使用,进行测试
- Vue监听select的事件
监听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) } })
因为用到监听值的变化进行动态查询,所以查询资料找到此办法,亲测可行
Vue监听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) } } })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)