Vue按回车键进行搜索的实现方式

更新时间：2023年01月14日 14:36:38 作者：阿wei程序媛

这篇文章主要介绍了Vue按回车键进行搜索的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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 提交以后不刷新页面

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 实现前进刷新后退不刷新的效果
这篇文章主要介绍了Vue 实现前进刷新后退不刷新的效果,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
vue 实现微信浮标效果
微信的浮窗，大伙应该都用过，当我们正在阅读一篇公众号文章时，突然需要处理微信消息，点击浮窗，在微信上会有个浮标，点击浮标可以再次回到文章。今天小编抽空给大家介绍vue 实现微信浮标效果，感兴趣的朋友一起看看吧
2019-09-09
vue项目打包部署到服务器的方法示例
这篇文章主要介绍了vue项目打包部署到服务器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue实现根据hash高亮选项卡
这篇文章主要为大家详细介绍了Vue实现根据hash高亮选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
Vue前端判断数据对象是否为空的实例
这篇文章主要介绍了Vue前端判断数据对象是否为空的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
ant-design-vue中设置Table每页显示的条目数量方式
这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue.js实现拖放效果的实例
这篇文章主要介绍了Vue.js实现拖放效果的实例的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
Vuex处理用户Token过期及优化设置封装本地存储操作模块
这篇文章主要为大家介绍了Vuex处理用户Token优化设置封装本地存储操作模块及Token 过期问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue登录功能实现
本文主要介绍了 Vue 登录功能实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue-router中关于children的使用方法
这篇文章主要介绍了vue-router中关于children的使用方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08