目录

前言

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