vue中el-input回车事件刷新页面

需求

在页面中，输入框中输入内容以后，回车查询下面的数据

方案

使用input的回车事件 =>  @keyup.enter.native="”

问题

页面中点击回车以后，会刷新页面，并且路由中加了一个？

解决方案

查证后得知，form表单中，如果只有一个input框的话，回车的时候默认提交了表单，导致刷新了页面

方案1 添加一个其他的input，但是不显示出来

vue的话不能使用v-if修饰，v-if还是会出问题，必须使用v-show

<el-form ref="searchFom" :model="searchFom" label-width="140px">
  <el-row:gutter="10">
    <el-col :span="8">
      <el-form-item prop="porder" label="编号:">
        <el-input v-model.trim="searchFom.order" clearable @keyup.enter.native="getList"></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8" v-show="false">
      <el-form-item prop="aaa" label="主订单编号:">
        <el-input v-model.trim="searchFom.aaa" clearable></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

方案2

直接给from表单添加修饰符 ‘@submit.native.prevent’

• @submit: 表单提交
• .native 绑定系统原生事件
• .prevent 提交以后不刷新页面

<el-form ref="searchFom" :model="searchFom" label-width="140px" @submit.native.prevent></el-from>

最后问题完美解决！