AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题

2024-08-15 993
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章讨论了在Vue 3中使用Element UI的`el-input`组件时，`@keyup.enter="search()"`事件绑定不生效的问题，并提供了通过使用`.native`修饰符来解决这个问题的方法。

1、问题描述

在输入框中、输入内容、点击回车。没有效果
在这里插入图片描述
问题代码
在这里插入图片描述

2、问题解决思路

查看官网的解释说明：

要使用.native修饰符
在这里插入图片描述

3、问题解决

修改后的代码
在这里插入图片描述

修改后的效果
在这里插入图片描述

文章标签：
JavaScript
热爱技术的小郑
目录
相关文章
hhzz
|
JavaScript 内存技术
node与npm版本对应关系以及使用nvm管理node版本
node与npm版本对应关系以及使用nvm管理node版本
hhzz
8803 0
Yaiba123
|
数据格式
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧，包括多列合并和单列合并的方法，并提供了相应的示例代码和运行效果。
Yaiba123
10533 46
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
TE-茶叶蛋
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式，包括设置type为number，使用inputmode属性，自定义指令，计算属性，使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点，可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
TE-茶叶蛋
3403 0
el-input限制输入整数等分析
全栈弄潮儿
|
UED
【Vue2从入门到精通】一分钟让你学会vue2搜索关键词高亮
本文主要介绍了vue2实现搜索关键词高亮的方法，有需要的朋友可以借鉴参考，祝大家多多进步，早日升职加薪。
全栈弄潮儿
642 0
【Vue2从入门到精通】一分钟让你学会vue2搜索关键词高亮
码喽的自我修养
|
JavaScript
elementUI/Plus 输入框按回车刷新页面分析与解决
elementUI/Plus 输入框按回车刷新页面分析与解决
码喽的自我修养
3242 1
elementUI/Plus 输入框按回车刷新页面分析与解决
Li370234940
|
JavaScript 前端开发 索引
JS 删除数组元素（ 5种方法 ）
JS 删除数组元素（ 5种方法 ）
Li370234940
1339 1
fruge365
【UI】 elementui input输入框自动获取失去焦点
【UI】 elementui input输入框自动获取失去焦点
fruge365
962 1
她说她一如既往的爱我
el-upload中的before-upload不生效
el-upload中的before-upload不生效
她说她一如既往的爱我
1245 3
G佳伟
|
JavaScript 网络架构
vue 使用 this.$router.push 传参数，接参数的 query或params 两种方法示例
vue 使用 this.$router.push 传参数，接参数的 query或params 两种方法示例
G佳伟
2928 4
fruge365
|
JavaScript 前端开发 数据安全/隐私保护
【vue】自定义指令实现 复制、长按、水印 功能
【vue】自定义指令实现 复制、长按、水印 功能
fruge365
818 0