element-ui组件中input等的change事件中传递自定义参数


Posted in Javascript onMay 22, 2019

以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态。

下面这样写是无效的:

@change="changeStatus(val, index)"

<div v-for="(item,index) in itemList">
   <el-select v-model="item.value" @change="changeStatus(val, index)">
     <el-option v-for="op in options" 
       :key="op.key":
       :label="op.label"
       :value="op.label">
     </el-option>
    </el-select>
</div>

这样再封装一层就可以了:

@change="((val)=>{changeStatus(val, index)})"
<div v-for="(item,index) in itemList">
   <el-select v-model="item.value" @change="((val)=>{changeStatus(val, index)})">
    <el-option v-for="op in options" 
     :key="op.key" 
     :label="op.label"
      value="op.label">
     </el-option>
   </el-select>
 </div>

总结

以上所述是小编给大家介绍的element-ui组件中input等的change事件中传递自定义参数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!        

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
20个最新的jQuery插件
Jan 13 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
bootstrap table服务端实现分页效果
Aug 10 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
javascript实现时钟动画
Dec 03 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 #Javascript
小程序如何使用分包加载的实现方法
May 22 #Javascript
原生js实现trigger方法示例代码
May 22 #Javascript
koa router 多文件引入的方法示例
May 22 #Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 #Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 #Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 #Javascript
You might like
php获取excel文件数据
2017/04/21 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
Javascript MD4
2006/12/20 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
js实现随机点名小功能
2017/08/17 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
JS中数据结构之栈
2019/01/01 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python实现共轭梯度法
2019/07/03 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
喜之郎果冻广告词
2014/03/20 职场文书
市级文明单位申报材料
2014/05/07 职场文书
李培根演讲稿
2014/05/22 职场文书
保护环境的标语
2014/06/09 职场文书
如何写股份合作协议书
2014/09/11 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
研究生导师推荐信
2015/03/25 职场文书
施工安全保证书
2015/05/09 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
redis 存储对象的方法对比分析
2021/08/02 Redis