Vue.js监听select2的值改变进行查询方式
作者:A吴广智 时间:2024-04-30 10:42:13
监听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)
?? ??? ?}
?? ?}
})
以上为个人经验,希望能给大家一个参考,也希望大家多多支持asp之家。
来源:https://blog.csdn.net/weixin_44443884/article/details/106541309
标签:Vue.js,监听,select2,查询
0
投稿
猜你喜欢
Golang拾遗之实现一个不可复制类型详解
2024-05-13 10:40:29
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2023-03-23 04:12:20
平面设计中的文字设计
2009-01-15 12:09:00
MYSQL拒绝访问报错not allowed to connect
2024-01-16 02:20:21
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2022-06-10 19:10:11
Pandas的AB BA类型数据框去重复
2022-09-26 07:48:16
Selenium元素的常用操作方法分析
2021-09-21 14:51:54
基于Python编写简易的成语接龙游戏
2022-08-26 02:15:05
vue3 axios 实现自动化api配置详解
2024-05-28 16:01:23
Python StringIO模块实现在内存缓冲区中读写数据
2021-12-22 08:23:13
深入理解python中的闭包和装饰器
2023-03-20 06:27:48
使用Pycharm+PyQt5弹出子窗口的程序代码
2022-03-09 20:15:17
numpy.transpose对三维数组的转置方法
2023-10-11 07:32:36
使用bin-log日志还原数据库的例子
2024-01-27 07:17:43
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2021-08-26 14:23:11
详解如何在阿里云上安装mysql
2024-01-14 08:25:57
graphql---go http请求使用详解
2024-02-07 08:11:56
javascript 文档的编码问题解决
2024-04-22 22:45:22
原生js拖拽实现图形伸缩效果
2024-04-16 08:55:27
Electron点击穿透不规则窗体的透明区域的实现
2024-04-23 09:32:32