el-input绑定@keyup.enter事件失效

一、问题描述

给el-input绑定了@keyup.enter事件，期望按回车时自动调用查询方法，但事件绑定失效，按回车，整个页面都刷新了。

二、原因分析

当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。

三、解决方案

3.1 在el-form表单加上@submit.native.prevent

<el-form @submit.native.prevent>
    <el-input v-model="input" @keyup.enter.native="search1">
</el-form>

3.2 加一个隐藏的文本框，即表单不只有一个文本框

<el-form>
    <el-input v-show="false"></el-input>
    <el-input v-model="input" @keyup.enter.native="search1">
</el-form>