情景描述:当使用@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标签上