Vue form component triggers the submit event twice

Question

Vue form component triggers the submit event twice

In my current project, I am utilizing the most recent version of Vue 3 without any additional vendors. After experiencing a setback in which I invested several hours attempting to uncover why my form component was triggering the submit event twice, I am left wondering if this is a bug or an anticipated behavior.

When listening for @submit on your form and subsequently $emit('submit') to enable listening to this event on the parent component, you will find that the event fires twice.

For a visual demonstration, please refer to the following pen: https://codepen.io/rekam/pen/dyeqxyy

Revised app logic goes here...

Although I can manage with specifying a distinct name for my submit event, I am curious as to why this issue occurs and whether it is intentional.

UPDATE

Upon further exploration, I discovered that enclosing the form tag within a div eliminates the second submit event. To replicate the scenario where the submit event occurs twice, you need:

Your form serving as the top-level DOM element in your component
Emitting an event named "submit"

javascript forms vue.js vuejs3

Answer 1

Answer №1

There is no need to include the event @submit.prevent.stop="onSubmit" in your child component because it will be automatically inherited from the parent component.

template: `
    <form>
      <input type="text" />
      <input type="submit" value="in component" />
    </form>
  `,

template: `
    <div>
      <TestForm event-name="submit" @submit.prevent="() => onSubmit('with event name [submit]')" />
      <TestForm event-name="other" @submit.prevent="() => onSubmit('with event name [other]')" />
      <blockquote>
        <p v-for="(log, i) in logs" :key="i">{{ log }}</p>
      </blockquote>
      <input type="button" value="clear" @click="logs = []" />
    </div>
  `,

https://codepen.io/keyXpert/pen/dyegYQB

Answer 2

There is no need to include the event @submit.prevent.stop="onSubmit" in your child component because it will be automatically inherited from the parent component.

template: `
    <form>
      <input type="text" />
      <input type="submit" value="in component" />
    </form>
  `,

template: `
    <div>
      <TestForm event-name="submit" @submit.prevent="() => onSubmit('with event name [submit]')" />
      <TestForm event-name="other" @submit.prevent="() => onSubmit('with event name [other]')" />
      <blockquote>
        <p v-for="(log, i) in logs" :key="i">{{ log }}</p>
      </blockquote>
      <input type="button" value="clear" @click="logs = []" />
    </div>
  `,

https://codepen.io/keyXpert/pen/dyegYQB

Answer 3

Answer №2

By triggering the submit action twice - once with a custom event listener created through 'emit', and another one with '@submit' added to your form tag, you are duplicating the process unnecessarily. It is advisable to choose either of these methods to efficiently submit your form.

Answer 4

By triggering the submit action twice - once with a custom event listener created through 'emit', and another one with '@submit' added to your form tag, you are duplicating the process unnecessarily. It is advisable to choose either of these methods to efficiently submit your form.

Vue form component triggers the submit event twice

Answer №1

Answer №2

Similar questions

Unveiling the secret to accessing properties using v-if within a custom component template relocation

Click on a new tab to enable printing options for the page

Passing the value of an Angular component to a different component

Similar to session_start() and $_SESSION in Node.js/Express

Tips for integrating AsyncGenerators with Kotlin/JS

Challenges encountered when passing objects with Angular 2 promises

JavaScript - Combine objects by summing values with matching keys

The entrance animation kicks off while the exit animation is still in progress

Assistance with jQuery in Javascript is needed

Can I utilize p5.Vector.fromAngle() in Vue JS?

Getting the input from an HTML editor and inserting it into a textarea using JavaScript

Unable to retrieve the API key in Nuxt framework

Tracking a razor ajax form using pace.js has never been easier with these simple steps

How can I fix the error "rootRef.current.contains is not a recognized function" when using the Transition Component in react-transition-group with the latest versions

Issues encountered with Angular POST requests

Tips for transferring a DotNetObjectReference to a JS DOM event

What is the process of modifying the 'Access-Control-Allow-Origin' header?

Chaining promises: The benefits of attaching an error handler during Promise creation versus appending it to a variable containing a promise

Showcasing international data using a table in Vue.js

Is it possible to utilize WebAssembly in JavaScript to access the memory of a C struct directly?