亲宝软件园·资讯

展开

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

阿wei程序媛 人气:0

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>

总结

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

加载全部内容

相关教程
猜你喜欢
用户评论