时间戳

首页 > 解决方案 > Vue - 另一个表单内的表单并提交事件触发器

vue.js - Vue - 另一个表单内的表单并提交事件触发器

问题描述

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

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第二种形式的方法？

标签： vue.js

解决方案

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

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

推荐阅读