vue el-input使用回车键会刷新页面

目录

• 解决方法

 

---

问题：vue项目中 在输入框输入字符并按下回车键搜索时，不会进行搜索， 而是会刷新页面。

后来发现 只有页面中只有一个input时 才会出现此问题，经查阅得知，是因为当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 所以会产生刷新页面的行为

回到顶部

解决方法

在el-form中加入 

<el-form :inline="true" label-suffix="：" @submit.native.prevent>
      <el-form-item label="用户名">
        <el-input v-model.trim="queryData.username" @keydown.enter.native="fetchData" clearable placeholder="请输入用户名"/>
      </el-form-item>
        ......
</el-form>

@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面