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 相关文章推荐
深入理解Javascript中的循环优化
Nov 09 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
angular4自定义组件详解
2017/09/28 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python fileinput模块使用实例
2015/06/03 Python
python如何将图片转换为字符图片
2020/08/19 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
基于python实现学生信息管理系统
2019/11/22 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
安全教育月活动总结
2014/05/05 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python