vue 回车事件刷新页面

element-ui

解决办法

el-form标签添加 @submit.native.prevent

  • 栗子
<el-form @submit.native.prevent>
  <el-input placeholder="请输入标题/工单号" v-model="search" size="medium" @keyup.enter.native="onSubmit"></el-input>
</el-form>ou

form

解决办法

这样出现的问题是，按下回车后会刷新页面，原因是按回车后默认提交了表单， 一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。
  • 栗子
加一个隐藏的文本框
<form action="#">
  <input type="search" placeholder="搜索商品" class="search_input" v-model="keyword" @keyup.enter="doSearch">
  <input type="text" style="display:none" />
</form>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容