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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
github配置使用指南
2014/11/18 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python函数定义和调用过程详解
2020/02/09 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
详解python UDP 编程
2020/08/24 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
委托书范文
2014/04/02 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
公司回复函格式
2015/07/14 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Python中的程序流程控制语句
2022/02/24 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers