CODEWITHSUNDEEP
vue.js
Steve
Steve

Reputation: 331

Vue - Form inside another form and submit event trigger

I have a form inside another form and I want to prevent default action for both forms on submit event:

Vue component:

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

Child:

<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>

When I submit update-user form then the component onSubmit method is hit and prevents default action. However, when I hit delete-user form then the onSubmit method is not hit and the page gets reloaded.

If I get the second form outside of the first one, then it works.

How I can trigger onSubmit method for the second form?

Upvotes: 0

Views: 1663

Answers (1)

Shirshak55
Shirshak55

Reputation: 528

No, This looks like nested form and it violates the spec as outlined in Prohibitions.

Form must not contain another form. I think you should design your app differently. May be two different forms. Or just use plain ajax request as its a vue app anyway?

Upvotes: 2

Related Questions