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 提交以后不刷新页面