无法阻止表单提交的默认值|视图 3答案

【问题标题】：Can't prevent default on form submission | Vue 3无法阻止表单提交的默认值|视图 3
【发布时间】：2021-05-22 02:45:06
【问题描述】：

使用 Vue 3.0.5

我有一个表格：

<form id="app" @submit="onSubmit">
    <input type="text">
    <input type="text">
    <button type="submit">submit</button>
</form>

还有一个 Vue 组件：

Vue.createApp({
    data() {
        return {}
    },
    methods: {
        onSubmit(e) {
            e.preventDefault();
        }
    }
}).mount('#app');

而且似乎无法阻止页面在提交表单时重新加载。在上面的版本中，我在方法中使用了e.preventDefault()。我也试过：

@submit.prevent 而不是手动调用e.preventDefault()
v-on:submit 打电话时e.preventDefault()
v-on:submit.prevent 无需调用
@submit.prevent/v-on:submit.prevent同时手动调用

除了恢复到 Vue 2 之外似乎没有任何效果。也许是 Vue 3 的问题或我遗漏的一些怪癖？

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

一种解决方法是将form 包装在另一个元素中，例如div，并将其用作挂载点：

<script src="https://unpkg.com/vue@3.0.5"></script>

<div id="app">
  <form @submit.prevent="onSubmit">
      <input type="text">
      <input type="text">
      <button type="submit">submit</button>
  </form>
</div>

<script>
Vue.createApp({
  methods: {
    onSubmit() {
      console.log('submit')
    }
  }
}).mount('#app')
</script>

【讨论】：

【解决方案2】：

您可以将按钮类型设置为按钮，然后执行单击事件来执行您想要的操作。这应该可以防止它重新加载

比如：

<form id="app">
    <input type="text">
    <input type="text">
    <button type="button" @click="yourFunction">submit</button>
</form>

问题在于您的按钮类型。如果需要，您还可以在按钮而不是表单上阻止默认设置。

【讨论】：

这是一个不错的侧面步骤，但不会阻止用户直接按 Enter 提交。在这种情况下，页面会重新加载并且值会丢失。
那么如果是这种情况，那么您可以在按钮的单击事件上添加阻止默认值。这应该会停止重新加载页面
聚焦输入字段之一，用户可以按下回车键，提交事件将触发。他们不必点击按钮。

【解决方案3】：

<template>
    <form id="app" @submit.prevent="onSubmit">
        <input type="text" />
        <input type="text" />
        <button type="submit">submit</button>
    </form>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {};
        },
        methods: {
            onSubmit(e) {
                console.log(e);
            }
        }
    };
</script>

这可以正常工作。默认是这样阻止@submit.prevent="onSubmit"的。

在 vue3 应用上测试。

【讨论】：

看起来您在这里使用的是单个文件组件。我只是安装了一个 Vue 应用程序实例。如果您的版本确实适用于 3.0.5，我认为这可能是 Vue 问题。

【解决方案4】：

使用 @submit.prevent 而不使用 e.preventDefault() ..vue2 和 3 两个版本都会自动处理事件传播..

因为这是一个 Comman 事件调用，所以 vue 会为我们处理这个问题.. 也因为 methods() 被认为是使用数据逻辑而不是 DOM 操作

参考 - Link

【讨论】：

是的，我已经尝试过了（问题的后半部分）。