Vue按回车键进行搜索的实现方式
作者:阿wei程序媛 时间:2024-05-05 09:06:27
Vue按回车键进行搜索
需求:
为了用户方便进行搜索数据的时候不想点击搜索按钮,想要在input输入框内输入完成之后直接按回车键进行搜索
第一种方法
在input标签内部增加@keyup.enter事件即可,事件名为按钮点击名称
<div class="center">
<input placeholder="输入名称" v-model="keyword"
@keyup.enter="getsearchdata">
</div>
<div class="seal" @click="getsearchdata">搜索</div>
第二种方法
<div class="center">
<input placeholder="输入名称" v-model="keyword"
@keyup.enter.native="getsearchdata" @submit.native.prevent
>
</div>
<div class="seal" @click="getsearchdata">搜索</div>
注:
@keyup.enter.native="getsearchdata"//这里要和搜索的事件名称一样
@submit.native.prevent //这句话禁止第一次进入页面回车搜索的时候刷新页面
这两种方法,都能实现按回车键进行搜索的功能
Vue使用回车键失效的解决
在用Vue开发一个前端页面,做的一个搜索功能,目标:输入搜索条件后,回车键直接搜索。但是得到的结果却是系统刷新,并没有搜索。这是为啥呢?对比了其他文件,代码没有错,一脸懵。后来查阅资料才发现错误,下面介绍解决方法~
Vue回车键事件
对于原生的Vue来说,要绑定回车(enter)事件,只需要:
@keyup.enter="方法名"
而如果用了类似于Element UI之类的第三方UI框架的话,则得在后面加【.native】修饰符:
@keyup.enter.native="方法名"
栗子
<el-form-item label="名称" prop="taskName">
<el-input
v-model="queryParams.taskName"
placeholder="请输入名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</el-form-item>
回车失效原因
查考相关文档得知:
W3C 标准中有如下规定:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
即:当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在
<el-form>
标签上添加@submit.native.prevent
。
解决方法
<el-form> 标签上添加 @submit.native.prevent。
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>
@submit
: 表单提交.native
绑定系统原生事件.prevent
提交以后不刷新页面
来源:https://blog.csdn.net/m0_58565372/article/details/128188212
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
一个不错的javascript加密解密算法源码
JavaScript与JQuery框架基础入门教程
C++与mysql连接遇到的问题汇总
Tag的自定义类
[ASP]提高数据显示效率--缓存探幽
Pandas处理时间序列数据操作详解
![](https://img.aspxhome.com/file/2023/0/127890_0s.png)
AJAX的jQuery实现入门(一)
![](https://img.aspxhome.com/file/UploadPic/20085/1/20085113327455s.gif)
PHP 计算两个特别大的整数实例代码
python中列表(list)和元组(tuple)的深入讲解
go语言代码生成器code generator使用示例介绍
![](https://img.aspxhome.com/file/2023/0/125070_0s.png)
用javascript连接access数据库的方法
python内置模块collections知识点总结
Python+tkinter使用40行代码实现计算器功能
![](https://img.aspxhome.com/file/2023/3/108043_0s.jpg)
Python按钮的响应事件详解
![](https://img.aspxhome.com/file/2023/5/98825_0s.png)
Python面向对象编程之类的概念
python清除字符串前后空格函数的方法
css实现图片倒影效果
![](https://img.aspxhome.com/file/UploadPic/200711/5/2007115184648157s.jpg)
Python定时库APScheduler的原理以及用法示例
![](https://img.aspxhome.com/file/2023/7/80817_0s.jpg)
js自定义网页右键菜单方法
python实现给scatter设置颜色渐变条colorbar的方法
![](https://img.aspxhome.com/file/2023/9/98849_0s.jpg)