编程 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 相关文章推荐

JavaScript 数组运用实现代码

Apr 13 Javascript

基于js disabled="false"不起作用的解决办法

Jun 26 Javascript

jquery操作checked属性以及disabled属性的多种方法

Jun 20 Javascript

JavaScript实现九九乘法表的简单实例

Jun 07 Javascript

node.js缺少mysql模块运行报错的解决方法

Nov 13 Javascript

div实现自适应高度的textarea实现angular双向绑定

Jan 08 Javascript

Vue.js实战之Vuex的入门教程

Apr 01 Javascript

jquery tmpl模板(实例讲解)

Sep 02 jQuery

node实现基于token的身份验证

Apr 09 Javascript

vue在手机中通过本机IP地址访问webApp的方法

Aug 15 Javascript

React 源码中的依赖注入方法

Nov 07 Javascript

JavaScript数据结构之栈实例用法

Jan 18 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中存储用户ID和密码到mysql数据库的方法

2013/02/06 PHP

PHP实现批量生成App各种尺寸Logo

2015/03/19 PHP

php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例

2016/05/28 PHP

yii2.0实现创建简单widgets示例

2016/07/18 PHP

PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)

2016/12/02 PHP

360搜索引擎自动收录php改写方案

2018/04/28 PHP

Laravel框架模型的创建及模型对数据操作示例

2019/05/07 PHP

PHP页面静态化――纯静态与伪静态用法详解

2020/06/05 PHP

jquery 隐藏与显示tr标签示例代码

2014/06/06 Javascript

node.js中的buffer.fill方法使用说明

2014/12/14 Javascript

jQuery+AJAX实现网页无刷新上传

2015/02/22 Javascript

Vue2递归组件实现树形菜单

2017/04/10 Javascript

vue-cli3.0 特性解读

2018/04/22 Javascript

vue实现的双向数据绑定操作示例

2018/12/04 Javascript

Element中的Cascader（级联列表）动态加载省\市\区数据的方法

2019/03/27 Javascript

vue-week-picker实现支持按周切换的日历

2019/06/26 Javascript

Vue实现剪贴板复制功能

2019/12/31 Javascript

node事件循环和process模块实例分析

2020/02/14 Javascript

js中调用微信的扫描二维码功能的实现代码

2020/04/11 Javascript

[00:23]DOTA2群星共贺开放测试 25日无码时代来袭

2013/09/23 DOTA

Python中random模块生成随机数详解

2016/03/10 Python

python获取当前文件路径以及父文件路径的方法

2019/07/10 Python

使用darknet框架的imagenet数据分类预训练操作

2020/07/07 Python

浅析Python 字符编码与文件处理

2020/09/24 Python

python向xls写入数据(包括合并，边框，对齐，列宽）

2021/02/02 Python

阿迪达斯丹麦官网：adidas丹麦

2016/10/01 全球购物

Zavvi西班牙：电子游戏、极客服装、Blu-ray、Funko Pop等

2019/05/03 全球购物

为什么需要版本控制

2016/10/28 面试题

医学生求职自荐信

2013/10/25 职场文书

高中生自我评语大全

2014/01/19 职场文书

暑期教师培训方案

2014/06/07 职场文书

工作失职检讨书范文

2015/05/05 职场文书

pycharm2021激活码使用教程(永久激活亲测可用)

2021/03/30 Python

python自动化之如何利用allure生成测试报告

2021/05/02 Python

用Python进行栅格数据的分区统计和批量提取

2021/05/27 Python

ORM模型框架操作mysql数据库的方法

2021/07/25 MySQL