此文章发布于 64 个月前，部分信息可能已经过时，请自行斟酌确认。

基于 vue + element-ui 创建了一个页面，顶部需要一个搜索菜单，使用 el-form 包裹了一个 el-input 输入框用于输入关键字，开发过程中遇到下面的问题。

问题描述

为了用户体验考虑在 el-input 输入框中输入关键字后按键盘回车键将进行搜索，于是为 el-input 绑定了 @keyup.enter.native 事件，但测试时发现在输入关键字按回车后整个页面刷新了并且输入的内容也被清空了，问题代码如下：

<el-form>
  <el-input v-model="searchKey" @keyup.enter.native="doSearch" @clear="clearSearch" clearable></el-input>
</el-form>

另外发现，在刷新过页面后，在地址栏 url 中会多出一个问号，这时再输入关键字回车页面就不再刷新了。

问题分析

查阅资料发现当一个 form 元素中只有一个输入框时，在该输入框中按下回车会提交该表单。如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent。

解决方案

方法一：

为表单元素增加 @submit.native.prevent。

<el-form @submit.native.prevent>
  <el-input v-model="searchKey" @keyup.enter.native="doSearch" @clear="clearSearch" clearable></el-input>
</el-form>

方法二：

为表单元素增加属性 onSubmit="return false"。