编程 Javascript

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监听不了回车事件的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

无所事事者爱嘲笑

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 弹出层实现代码

Oct 30 Javascript

jQuery中绑定事件的命名空间详解

Apr 05 Javascript

JavaScript使用focus()设置焦点失败的解决方法

Sep 03 Javascript

javascript设计模式之对象工厂函数与构造函数详解

Jul 30 Javascript

关于JavaScript数组你所不知道的3件事

Aug 24 Javascript

vue实现可增删查改的成绩单

Oct 27 Javascript

JS实现Ajax的方法分析

Dec 20 Javascript

jQuery EasyUI Panel面板组件使用详解

Feb 28 Javascript

Vue Spa切换页面时更改标题的实例代码

Jul 15 Javascript

妙用缓存调用链实现JS方法的重载

Apr 30 Javascript

详解javascript 正则表达式之分组与前瞻匹配

May 30 Javascript

在vue-cli中引入lodash.js并使用详解

Nov 13 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/10/09 PHP

zend api扩展的php对象的autoload工具

2011/04/18 PHP

php开发留言板的CRUD(增，删，改，查)操作

2012/04/19 PHP

php牛逼的面试题分享

2013/01/18 PHP

PHP保存带BOM文件的方法

2015/02/12 PHP

php实现的rc4加密解密类定义与用法示例

2018/08/16 PHP

精解window.setTimeout()&window.setInterval()使用方式与参数传递问题！

2007/11/23 Javascript

js计算页面刷新的次数

2009/07/20 Javascript

jquery获取一个元素下面相同子元素的个数代码

2014/07/31 Javascript

jQuery实现带滑动条的菜单效果代码

2015/08/26 Javascript

使用Node.js处理前端代码文件的编码问题

2016/02/16 Javascript

checkbox 选中一个另一个checkbox也会选中的实现代码

2016/07/09 Javascript

javascript中递归的两种写法

2017/01/17 Javascript

JavaScript中双向数据绑定详解

2017/05/03 Javascript

除Console.log()外更多的Javascript调试命令

2018/01/24 Javascript

从零搭一个自用的前端脚手架的方法步骤

2019/09/23 Javascript

Vue搭建后台系统需要注意的问题

2019/11/08 Javascript

vue 使用原生组件上传图片的实例

2020/09/08 Javascript

python sys模块sys.path使用方法示例

2013/12/04 Python

让python同时兼容python2和python3的8个技巧分享

2014/07/11 Python

matplotlib作图添加表格实例代码

2018/01/23 Python

Python实现的从右到左字符串替换方法示例

2018/07/06 Python

python MNIST手写识别数据调用API的方法

2018/08/08 Python

django自定义模板标签过程解析

2019/12/14 Python

Python hmac模块使用实例解析

2019/12/24 Python

python实现一个猜拳游戏

2020/04/05 Python

Python实现简单的猜单词小游戏

2020/10/28 Python

CSS实现雨滴动画效果的实例代码

2019/10/08 HTML / CSS

阿迪达斯比利时官方商城：adidas比利时

2016/10/10 全球购物

预订从美国飞往印度的机票：MyTicketsToIndia

2017/05/19 全球购物

食品安全工作方案

2014/05/07 职场文书

关于责任的演讲稿

2014/05/20 职场文书

党的群众路线教育实践活动整改落实情况报告

2014/10/28 职场文书

迎新年主持词

2015/07/06 职场文书

2017年寒假社区服务活动总结

2016/04/06 职场文书

PHP控制循环操作的时间

2021/04/01 PHP