Vue - 另一个表单内的表单并提交事件触发器答案

【问题标题】：Vue - Form inside another form and submit event triggerVue - 另一个表单内的表单并提交事件触发器
【发布时间】：2021-07-19 22:41:22
【问题描述】：

我在另一个表单中有一个表单，我想阻止两个表单在提交事件时的默认操作：

Vue 组件：

<template>
    <div v-show="isActive" @submit.prevent="onSubmit">
        <slot :form="form"></slot>
    </div>
</template>

孩子：

<form method="POST" action="/update-user">

    // form fields part 1

    <form method="GET" action="/delete-user">
        <button type="submit">
            <span>{{ $is_deleted ? 'Cancel Delete' : 'Delete Account' }}</span>
        </button>
    </form>

    // form fields part 2

    <button type="submit">
        <span>Update</span>
    </button>
</form>

当我提交update-user 表单时，组件onSubmit 方法被命中并阻止默认操作。但是，当我点击delete-user 表单时，onSubmit 方法没有被点击，页面被重新加载。

如果我在第一个表单之外获得第二个表单，那么它可以工作。

我怎样才能为第二种形式触发onSubmit方法？

【问题讨论】：

我不知道答案，但看看这篇文章。 Proper Form Handling in VueJS.
您还可以查看 vee-validate，您可以在其中构建嵌套表单。如果您的表单变得更高级和更高级的验证，例如自定义验证器，那就太好了。如果这是您唯一的表单并且没有验证，那么可能不需要 vee-validate。但只是为了将来，如果您确实需要一些更好的工具来构建表单:) 还有 vuelidate，但我没有这方面的经验。

标签： vue.js

【解决方案1】：

不，这看起来像嵌套形式，它违反了Prohibitions 中概述的规范。

表单不得包含其他表单。我认为你应该以不同的方式设计你的应用程序。可能是两种不同的形式。还是只是使用普通的 ajax 请求作为它的 vue 应用程序？

【讨论】：

谢谢，我想我得把嵌套的表单放到外面，然后在点击时使用一些 onclick 按钮事件来提交。