ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案

期望实现,输入数字后,回车直接执行点击按钮“转换”
无效写法:
<el-input v-model="input" placeholder="请在此输入待转换的数值" v-on:keyup.enter="convert">
解决办法,加上.native
<el-input v-model="input" placeholder="请在此输入待转换的数值" v-on:keyup.enter.native="convert">
原因说明:
用
v-on监听原生事件现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件,可以使用 .native 修饰符,比如:
<my-component v-on:click.native="doSomething"></my-component>
ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案的更多相关文章
- 为input标签绑定事件的几种方式
为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...
- 如何给a标签绑定ajax事件
<a href="review?action=delete&id=${review.id}&articleId=${review.articleId}"cla ...
- 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
很久以来,在写Html和JS时,经常会给超链接<a>标签,绑定JS事件. 我们经常看到这样的写法,<a href="javascript:;" onclick=& ...
- element-ui <el-input> 注册keyup事件,即键盘enter.
<template> <!-- 需求:keyup事件一般用在input中,在input框中输入内容,用户点击键盘的enter,执行搜索 --> <div class=&q ...
- 给js创建的一个input数组绑定click事件
<html> <body> <input type="button" name="input[]" value="按钮1 ...
- <span> <div> 局部 keydown ,keyup事件。页面部分div $(document) 无效,可能焦点,添加焦点。
前天改一个bug, js 实现的一个 面板拖拉,左右各两个列表,中间面板画线连接,页面左侧列表选中后,key 事件无效.右侧选中确有效,很奇怪,查看源码,左侧选中后,$(document).on(&q ...
- input标签的accept属性、JQuery绑定keyDown事件
一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file&qu ...
- 如何用input标签上传多个图片并回显
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...
- 记录JavaScript中使用keyup事件做输入验证(附event.keyCode表)
input的blur事件 $("#input-name").blur(function () { var value = $(this).val(); if (value === ...
随机推荐
- WEB渗透之扫描 - Nikto
2020.0202 好事成双 Nikto 纯主动 识别软件版本 存在安全隐患的文件 配置漏洞 web应用安全隐患 避免404误判 使用 插件:nikto -list-plugins 避免404误判功能 ...
- NLP(二十六)限定领域的三元组抽取的一次尝试
本文将会介绍笔者在2019语言与智能技术竞赛的三元组抽取比赛方面的一次尝试.由于该比赛早已结束,笔者当时也没有参加这个比赛,因此没有测评成绩,我们也只能拿到训练集和验证集.但是,这并不耽误我们在这 ...
- model进阶
本节目录 一 QuerySet 二 中介模型 三 查询优化 四 extra 五 整体插入 一 QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMI ...
- C++总结之template
函数模板 我们可以把函数模板当做一种特殊的函数,里面的参数类型可以是任意类型,这样的话我们就可以减少重复定义,从而让这个函数模板自动适应不同的参数类型,也就是说函数可以适应多种类型的参数,例如doub ...
- js实践篇:例外处理Try{}catch(e){}
本文转载至:http://blog.csdn.net/ocean20/article/details/7301008 程序开发中,编程人员经常要面对的是如何编写代码来响应错误事件的发生,即例外处理(e ...
- 关于Resouces.resx 在WPF中{x:Static}不显示内容只显示字段的问题解决办法
问题现象:<object property="{x:Static prefix:typeName.staticMemberName}" .../> 界面中只显示资源引用 ...
- python的元类编程
廖雪峰的python教程有python元类编程示例,综合代码如下 https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df ...
- How to do error checking in CUDA(如何在CUDA里做错误检查)
https://codeyarns.com/2011/03/02/how-to-do-error-checking-in-cuda/ Error checks in CUDA code can hel ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
- 小米官网轮播图js+css3+html实现
官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...