我们在input中加上键盘回车事件@keyup.enter.native,如下:
<el-form ref="form" :inline="true" :model="form" label-width="100px">
<el-input style="float: right" v-model="form.keyword" placeholder="筛选关键词" class="handle-input mr10" @keyup.enter.native="search"></el-input>
</el-form>
偶然间发现,只要是第一次来到页面,想通过回车快速搜索关键字,必定引发页面刷新。
分析后,发现原因如下:
form内只有一个输入框时,按回车会自动提交
解决办法:
阻止form的默认事件。
即在form上加上这句话:@submit.native.prevent
代码如下:
<el-form ref="form" :inline="true" :model="form" label-width="100px" @submit.native.prevent>
<el-input style="float: right" v-model="form.keyword" placeholder="筛选关键词" class="handle-input mr10" @keyup.enter.native="search"></el-input>
</el-form>