elementUI 输入框按回车刷新页面问题

分析原因:

当 el-form 表单内只有一个 el-input 输入框时,且type为text类型时,在输入框内按回车就会触发表单的提交事件。

而当 el-form 表单内有多个 el-input 输入框时,按回车不会执行任何操作。

使用.prevent修饰符来阻止默认的表单提交行为:

@submit.native.prevent注解添加到el-form标签上从而阻止了按下回车键时的页面刷新

.native 表示对一个组件绑定系统原生事件

.prevent 表示阻止默认事件(如form的submit事件默认提交会刷新页面,.prevent修饰符可以阻止该默认事件)

html 复制代码
<el-form @submit.native.prevent>
  <el-form-item>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
  </el-form-item>
</el-form>
相关推荐
共享家95274 小时前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式
Halo_tjn5 小时前
基于封装的专项 知识点
java·前端·python·算法
有来技术6 小时前
Spring Boot 4 + Vue3 企业级多租户 SaaS:从共享 Schema 架构到商业化套餐设计
java·vue.js·spring boot·后端
东东5168 小时前
学院个人信息管理系统 (springboot+vue)
vue.js·spring boot·后端·个人开发·毕设
m0_748229998 小时前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
C澒8 小时前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..8 小时前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
hhy_smile8 小时前
Class in Python
java·前端·python
小邓吖9 小时前
自己做了一个工具网站
前端·分布式·后端·中间件·架构·golang
南风知我意9579 小时前
【前端面试2】基础面试(杂项)
前端·面试·职场和发展