表单元素的默认提交行为

W3C中规定,当一个form元素中只有一个输入框(<input><textarea> )时,在该输入框中按下回车应该提交该表单。<el-form>表单组件中 @keyup.enter 事件导致页面刷新通常是因为表单元素的默认提交行为未被阻止。

解决方案

  1. 阻止表单默认提交(推荐)

如果 <el-input><form> 标签内,添加 @submit.prevent 处理表单提交事件:

xml 复制代码
<template>
  <form @submit.prevent> <!-- 关键:阻止表单默认提交 -->
    <el-input 
      v-model="queryParams.title" 
      placeholder="请输入计划名称" 
      clearable 
      @keyup.enter="handleQuery" 
    />
    <el-button type="primary">搜索</el-button>
  </form>
</template>
  1. 使用 .prevent 修饰符

如果不在表单内,直接在 @keyup.enter 后添加 .prevent 修饰符 在事件处理函数中调用 event.preventDefault()

xml 复制代码
<!-- 方法1 -->
<el-input 
  v-model="queryParams.title" 
  placeholder="请输入计划名称" 
  clearable 
  @keyup.enter.prevent="handleQuery" <!-- 关键:阻止默认事件 -->
/>
xml 复制代码
<!-- 方法2-->
const handleQuery = (event) => {
  event.preventDefault(); // 阻止默认行为
  // 处理查询逻辑
};
  1. 明确按钮类型

确保表单中的按钮类型为 button(而非默认的 submit):

xml 复制代码
<el-button type="primary" native-type="button">搜索</el-button> <!-- 明确指定为普通按钮 -->
  1. 如果使用了 element-plus <el-form>,需要在 <el-form> 上添加 @submit.native.prevent
xml 复制代码
<el-form @submit.native.prevent>
  <el-form-item label="计划名称">
    <el-input v-model="queryParams.title" @keyup.enter="handleQuery" />
  </el-form-item>
</el-form>

@submit.native.prevent 和 @submit.prevent 的区别是什么?

在 Vue 中,@submit.native.prevent@submit.prevent 的区别主要涉及 事件绑定对象组件封装特性

核心区别

特性 @submit.prevent @submit.native.prevent
绑定对象 自定义组件(如 <el-form>)的 submit 事件 原生 HTML 标签(如 <form>)的 submit 事件
触发条件 组件内部通过 $emit('submit') 触发 原生表单元素的提交事件(如按 Enter 键)
适用场景 自定义组件(如 Element Plus 的 <el-form> 普通 HTML 表单(<form>

详细解释

1. @submit.prevent

  • 作用对象 :自定义组件(如 <el-form>)。

  • 事件来源 :组件内部通过 $emit('submit') 主动触发的事件。

  • 示例

    xml 复制代码
    <!-- 自定义组件 FormComponent.vue -->
    <template>
      <form @submit.prevent>
        <button @click="$emit('submit')">提交</button> <!-- 手动触发 submit 事件 -->
      </form>
    </template>
    
    <!-- 使用自定义组件 -->
    <FormComponent @submit="handleSubmit" />

2. @submit.native.prevent

  • 作用对象 :原生 HTML 标签(如 <form>)。

  • 事件来源 :浏览器内置的表单提交行为(如按下 Enter 键、点击 <button type="submit">)。

  • 示例

    xml 复制代码
    <form @submit.native.prevent="handleSubmit">
      <input type="text" />
      <button type="submit">提交</button> <!-- 触发原生 submit 事件 -->
    </form>

Element Plus 组件的特殊处理

Element Plus 的 <el-form> 是一个封装组件,其内部包含原生 <form>。因此:

  • 阻止原生表单提交 :使用 @submit.native.prevent
  • 监听表单验证后的提交 :使用 @submit(需配合 el-form:model:rules)。
xml 复制代码
<el-form 
  :model="formData" 
  :rules="rules" 
  @submit.native.prevent <!-- 阻止原生提交 -->
  @finish="handleFinish" <!-- 监听验证后的提交 -->
>
  <el-form-item prop="username">
    <el-input v-model="formData.username" />
  </el-form-item>
  <el-button type="primary" native-type="submit">提交</el-button>
</el-form>

为什么需要 .native 修饰符?

Vue 组件会屏蔽原生事件,因此:

  • 普通组件 :使用 @click 监听自定义事件,使用 @click.native 监听原生事件。
  • 表单组件 :使用 @submit.native 监听原生表单提交事件。

总结

  • @submit.prevent :用于监听和阻止 自定义组件 内部触发的 submit 事件。
  • @submit.native.prevent :用于监听和阻止 原生表单元素 的提交事件(如 Enter 键、提交按钮)。
相关推荐
患得患失94930 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_32 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任4 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas