Issue: In a Vue 3 application, form submissions are being redundantly triggered. This happens even though @submit.prevent
and event.stopPropagation()
are used. The issue seems linked to the resetForm
method, which is called after form submission to reset the state. Both AdminBookForm and AdminBook components manage the form state and interact via props and events.
Steps to Reproduce:
form
object is passed as a prop from AdminBook
to
AdminBookForm
.handleSubmit
method in AdminBookForm
emits
a submit
event.AdminBook
handles the submit event
,
processes the form
, and calls its own resetForm
method.Question: How can I prevent redundant submissions caused by resetting the form state? Is the interaction between the parent and child components (prop-watching and event-emitting) causing this issue, and how can it be improved?
(Note: this code "seems" to work now - stopping the double submission, but I don't understand why it was double submitting, and how I can avoid that without having to put all the submit.prevent and the event.stopPropogation crap in there (unless it is good and necessary crap).)
I've also been a lazy coder and been getting aid from CoPilot and chatgpt on this. Perhaps it is suggesting an improper way to pass the events from child to parent that I shouldn't be doing.
AdminBookForm.vue
<template>
<div>
<form ref="bookForm" @submit.prevent="handleSubmit">
<input type="text" v-model="localForm.title" placeholder="Title" required />
<input type="text" v-model="localForm.author" placeholder="Author" />
<button type="submit">Submit</button>
<button type="button" @click="resetForm">Reset</button>
</form>
</div>
</template>
<script>
export default {
props: {
form: Object,
isEditing: Boolean,
},
data() {
return {
localForm: { ...this.form },
};
},
watch: {
form: {
handler(newVal) {
this.localForm = { ...newVal };
},
deep: true,
},
},
methods: {
handleSubmit(event) {
if (event) event.stopPropagation();
this.$emit('submit', { form: this.localForm, isEditing: this.isEditing });
},
resetForm() {
console.log('resetForm called');
this.localForm = { title: '', author: '' }; // Reset the form state
this.$emit('update:isEditing', false); // Notify parent that editing has stopped
},
},
};
</script>
AdminBook.vue
<template>
<div>
<AdminBookForm
:form="form"
:isEditing="isEditing"
@submit="handleSubmit"
@update:isEditing="updateIsEditing"
/>
</div>
</template>
<script>
import AdminBookForm from './AdminBookForm.vue';
export default {
components: { AdminBookForm },
data() {
return {
form: { title: '', author: '' },
isEditing: false,
};
},
methods: {
async handleSubmit({ form, isEditing }) {
if (!form) {
console.warn('Invalid form submission');
return;
}
console.log('Form submitted:', form, isEditing);
// Simulate form processing
await this.processForm(form);
// Reset the form in the parent after submission
this.resetForm();
},
resetForm() {
console.log('Parent resetForm called');
this.form = { title: '', author: '' }; // Reset parent state
this.isEditing = false;
},
updateIsEditing(newVal) {
this.isEditing = newVal;
},
async processForm(form) {
// Simulate async processing
console.log('Processing form:', form);
return new Promise((resolve) => setTimeout(resolve, 1000));
},
},
};
</script>
event.preventDefault()
(prevent
modifier) and event.stopPropogation()
(stop
modifier) serve different purposes. The former prevents default behaviour of form
element (GET request is sent on submit), the latter prevents submit
event from being propagated through DOM (and received by other elements). It can be shortened to @submit.stop.prevent="handleSubmit"
, but this is not necessary in this case.
The problem here is that parent component uses the same event name (submit
), and Vue events and DOM events aren't distinguished. So handleSubmit
receives both Vue event object and DOM submit event object where event.form
doesn't exist. The way to avoid this is to declare expected Vue events in child component:
props: {
form: Object,
isEditing: Boolean,
},
emits: ['submit', 'update:isEditing']
And use prevent
modifier:
<form @submit.prevent="handleSubmit">