vue按enter键刷新页面 使用@submit.native.prevent阻止表单默认提交，添加在form标签上

情景描述：当使用@keyup.enter.native来使输入搜索内容后，按下enter键就触发搜索。会发现一个奇怪的现象：当按下enter键时，先是根据输入的内容搜索了一次，紧接着又全局刷新了一次页面。

原因分析：当一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。

原代码如下：

<el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item label="用户名:">
        <el-input v-model.trim="listQuery.username" clearable v-focus @keyup.enter.native="getList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

解决办法：@submit.native.prevent阻止表单默认提交

.native 表示对一个组件绑定系统原生事件

.prevent 表示提交以后不刷新页面

代码如下

<el-form :inline="true" :model="listQuery" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="用户名:">
        <el-input v-model.trim="listQuery.username" clearable v-focus @keyup.enter.native="getList"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

@submit.native.prevent 阻止默认提交，添加在form标签上

@keyup.native.enter 回车操作，添加在input标签上