浅谈ElementUI中switch回调函数change的参数问题


Posted in Javascript onAugust 24, 2018

需求说明

八个switch组件,用同一个回调函数

switch组件状态发生变化时需要知道它目前开关状态

需要知道当前是哪个switch

问题描述

按照官方文档对switch事件的描述

事件名称 说明 回调参数
change switch 状态发生变化时的回调函数 新状态的值

下面这样写可以满足第二个需求,change回调函数中的参数callback就是开关当前的状态值,默认是boolean类型,但是第三个需求还不能解决.

<el-switch
 v-model="value1"
 @change='changeStatus'>
</el-switch>

<script>
 var vm = new Vue({
 el: "#app",
 data: {
  value1: true
 },
 methods: {
  change: function(callback){
  console.log(callback);
  }
 }
 })
</script>

解决办法

下面代码中的$event就是switch的当前状态值,而num就是自定义的参数

<el-switch
 v-model="value1"
 @change='changeStatus($event,1)'>
</el-switch>
<el-switch
 v-model="value2"
 @change='changeStatus($event,2)'>
</el-switch>

<script>
 var vm = new Vue({
 el: "#app",
 data: {
  value1: true,
  value2: false
 },
 methods: {
  change: function($event,num){
  console.log($event);
  console.log(num);
  }
 }
 })
</script>

拓展知识:基于element-ui(vue版)使用switch时change回调函数中的形参传值问题

需求说明

有多个switch组件

需要知道switch的状态

表格中当前行(scope.row)的数据

问题描述

官方文档中对switch中change的描述:

浅谈ElementUI中switch回调函数change的参数问题

目前能得到switch的状态值,但是无法得到change回调中第二个形参的值

解决方法:

change回调函数默认形参的实参是$event,其它的实参传自己需要的数据就ok

浅谈ElementUI中switch回调函数change的参数问题

浅谈ElementUI中switch回调函数change的参数问题

以上这篇浅谈ElementUI中switch回调函数change的参数问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 #Javascript
微信小程序支付PHP代码
Aug 23 #Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 #Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 #Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 #Javascript
React key值的作用和使用详解
Aug 23 #Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 #Javascript
You might like
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
如何使用Javascript中的this关键字
2020/05/28 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
python通过socket查询whois的方法
2015/07/18 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python异常处理和日志处理方式
2019/12/24 Python
Python实现SMTP邮件发送
2020/06/16 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
2014年教师政治学习材料
2014/06/02 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
法定代表人资格证明书
2015/06/18 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers