@keyup.native.enter 首次触发会刷新页面

言曌 2022年09月01日20:14:13 1 2054 views

博主分享免费Java教学视频，B站账号：Java刘哥，长期提供技术问题解决、项目定制：本站商品点此

在解决公司项目的Bug的时候，发现了一个

前端 Vue 输入框回车时会刷新页面，地址栏/#/变成 /?#/

后面再回车查询就没有问题

解决办法

在表单上加 @submit.native.prevent

示例代码

<el-form :inline="true" :model="filters" :size="size" @submit.native.prevent>
  <el-form-item label="表单名称">
    <el-input v-model="filters.formName" placeholder="请输入表单名称" @keyup.enter.native="handleFilter" clearable/>
  </el-form-item>
  <perm-button type="primary" label="查询" icon="uims-icon-query" @click="handleFilter" />
</el-form>