写列表页搜索条件时,偶然遇到一个 bug,就是输入数据之后点回车刷新页面。这是因为 form 在只有一个 input 元素时,默认回车为触发 form 表单的提交,在 jquery 时代是没什么问题的设定,但是在 vue 项目里并不适用。

bug 描述

当 form 表单中只存在一个 input 框时,回车自动提交表单,刷新页面。

解决方式

阻止 form 的默认事件,在 form 上添加下面这段代码:

@submit.native.prevent

问题代码

1
2
3
4
5
<el-form ref="form" :model="listQuery">
<el-form-item label="发证单位">
<el-input v-model="listQuery.company_name" @keyup.enter.native="inquire" />
</el-form-item>
</el-form>

修改后代码

1
2
3
4
5
<el-form @submit.native.prevent ref="form" :model="listQuery">
<el-form-item label="发证单位">
<el-input v-model="listQuery.company_name" @keyup.enter.native="inquire" />
</el-form-item>
</el-form>