于高衡的技术博客-分享golang、前端、职场、生活琐碎

input框回车刷新页面的问题修复

2021-12-12 · 2 min read
前端 bug记录 技术

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

bug描述

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

解决方式

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

@submit.native.prevent

问题代码

<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>

修改后代码

<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>