vue element-ui 绑定@keyup事件无效

最新推荐文章于 2024-05-15 19:49:23 发布

转载最新推荐文章于 2024-05-15 19:49:23 发布 · 1.9k 阅读

文章标签：

#vue

vue-js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种在Vue框架中解决元素事件被封装导致无法正常触发的方法。通过使用.native修饰符可以覆盖默认行为，使得自定义的keyup事件能够正确响应。

部署运行你感兴趣的模型镜像

<el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup="getGameList(searchParmas.gameName)"></el-input>

上面的代码keyup事件一直无法触发，修改为下面

<el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input>

加上.native覆盖原有封装的keyup事件即可

您可能感兴趣的与本文相关的镜像

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wolf131721

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue及Element UI&vue-element-admin简记

生活在别处

11-21

8699

文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...

vue 绑定 keyup.enter 绑定回车键盘事件 enter键防止页面刷新

爱睡的虫虫

12-10

1992

关于vue中的@keyup.enter键盘事件无法生效的解决办法。

参与评论您还未登录，请先登录后发表或查看评论

vue element-ui 绑定@keyup.enter事件无效解决办法

总结前端开发中遇到的问题，分享前端知识

09-01

5046

一般情况解决办法：在按钮上绑定keyup事件，加上.native覆盖原有封装的keyup事件 <el-button type="primary" class="sub-btn" style="width:100%;" :disabled="btnDisabled" :loading="logining" @click.native.prevent="handleSubmit" @keyup.native.enter="handleSubmit">{{loginStr}}</el-bu

vue element-ui 绑定@keyup事件无效的解决方法

12-29

解决办法： <el v-model=searchParmas.gameName placeholder=游戏名称 class=w120 keyup.native=getGameList(searchParmas.gameName)></el> 加上.native覆盖原有封装的keyup事件即可。以上这篇vue element-ui 绑定@keyup事件无效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue中form表单@keyup事件不生效解决办法

weixin_44707050的博客

05-17

1094

在form表单的input上，添加一个keyup.enter.native事件，但是不生效， enter后会刷新页面；@submit是提交表单， native绑定系统原生事件， prevent提交以后不刷新页面。在form表单上加@submit.native.prevent即可解决。

vue keyup不起作用

qq_42600948的博客

02-07

1762

@keyup.enter=“submit” 和 @click=“submit” 不能绑在同一个地方，否则回车不起作用。例如： <button @click="submit" @keyup.enter="submit" >登录</button> 最好的做法是： <form @keyup.enter="submit"> ... <button @click="submit" >登录</button> ... &l

vue3中el-button的@keyup.enter没反应

最新发布

06-04

首先，我得回忆一下之前用户提供的引用内容，里面提到过在Vue2和Element UI中，类似的问题通常需要添加.native修饰符，或者通过其他方法解决，比如隐藏的input或者全局事件监听。不过，Vue3和ElementPlus可能有所...

ElementUI 组件不支持@keyup 的解决办法

shykevin的博客

03-04

553

一、概述在ElementUI 项目中，使用@keyup.enter事件，发现不生效。 <el-input v-model="SearchData" class="input-with-select" @keyup.enter="SearchKeyDown"> 二、解决方法上面那种写法只适合原生,像组件是不适合用的, 加.native的原因就是为了转成原生 <el-i...

问题记录: ElementUi 文本域无法使用键盘事件@keyup

安歌

07-29

495

问题记录: ElementUi 文本域无法使用键盘事件问题原因:可以看到图上,在文本域上还有一层div标签,所以它不能直接是用键盘事件; 解决办法: 在@keyup事件后加上.native - native 主要是给自定义的组件添加原生事件看代码: <el-input type="textarea" :rows="3" placeholder="请输入内容" @keyup.native="sendEnter" v-mode.

@keyup 在element-ui中使用需要添加.native

weixin_45288172的博客

11-03

3302

@keyup在element-ui组件中失效。这是因为element-ui组件在原生组件的基础上进行了封装。如想使用@keyup则需要在keyup后面追加native关键词。

Element/iview UI组件不支持keyup键盘事件问题解决办法.native

weixin_40918145的博客

07-16

3672

在使用Element UI或iview UI组件时，会遇到直接写keydown.enter这样的键盘事件会出现无效的情况，这里需要加上native。直接写成下面这样enter事件将无效 1 2 3 <Input type="password" v-model="password" placeholder="password" @keyup...

解决element + vue中使用@keyup.enter.native回车刷新页面问题

weixin_41696001的博客

06-30

2152

@keyup.enter.native

vue element-ui el-input输入框绑定@keyup.enter回车事件无效

fangqi20170515的博客

11-21

6215

由于element-ui把input进行了封装，input外面是多一层div的。所以对于el-input，使用 @keyup.enter是无效的，需要加上。或者也可以直接input标签。

onChange事件详解

风火一回，一生不毁

05-15

1900

React 中，onChagne 事件是一个合成事件，由 ChangeEventPlugin 插件处理其监听。ChangeEventPlugin 插件会处理三类元素，select 和 file 监听 change 事件，input 和 textarea 监听 input 和 change 事件，checkbox 和 radio 监听 click 事件。

VUE 修饰符

m0_55240753的博客

09-13

1113

一、事件修饰符 1、@click.stop和原生js的event.stopPropagation()一样，都是阻止冒泡的，当一个元素有且只有它一个的时候看不出效果，当该元素存在父元素时就能看出来了，如下： // 当有且只有一个元素时点击打印只会出现一行结果（用原生写的） <div onclick="child"></div> <script> function child(){ console.log("你点击了子元素") } </

@keyup.enter.native不生效？看看@keyup.enter.native和@keyup.enter的区别和使用

南极修炼千年的大冰块

07-23

8247

vue中特殊的键盘修饰符，不必去记特定的keyCode： @keyup.13 == @keyup.enter @keyup.9 == @keyup.tab @keyup.46 == @keyup.delete (捕获 “删除” 和 “退格” 键) @keyup.27 == @keyup.esc @keyup.32 == @keyup.space @keyup.38 == @keyup.up @keyup.40 == @keyup.down @keyup.37 == @keyup.left @keyup.39

@keyup.enter.native不生效问题解决

RD_Xiaobai的博客

02-01

4835

输入框回车事件失效@keyup.enter.native不生效问题解决。