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標簽上