vue使用element-ui的el-input监听不了回车事件的解决方法


Posted in Javascript onJanuary 12, 2018

原因

今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果:

<el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input>

原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。

解决

在事件后面加上.native:

<el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter.native="search()"></el-input>

总结

以上所述是小编给大家介绍的vue使用element-ui的el-input监听不了回车事件的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 #Javascript
js 索引下标之li集合绑定点击事件
Jan 12 #Javascript
简单的Vue SSR的示例代码
Jan 12 #Javascript
详解如何在react中搭建d3力导向图
Jan 12 #Javascript
关于axios不能使用Vue.use()浅析
Jan 12 #Javascript
Vuex 进阶之模块化组织详解
Jan 12 #Javascript
动态Axios的配置步骤详解
Jan 12 #Javascript
You might like
[转帖]PHP世纪万年历
2006/12/06 PHP
PHP 第一节 php简介
2012/04/28 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
JS 判断代码全收集
2009/04/28 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
golang/python实现归并排序实例代码
2020/08/30 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
国培计划培训感言
2014/03/11 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
给客户的感谢信
2015/01/21 职场文书
化验室岗位职责
2015/02/14 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript