Looking for a way to handle an event in a child component, check for a specific condition, and then emit the "submit" event back to the parent for its event handler to run. The code snippet below demonstrates this process using Vue.js 2.6.11 (replacing "vue" with "@vue/composition-api"). However, when moving to version 3.0.0-rc.5, the parent's event handler seems to trigger twice. I'm curious to know if this behavior change is intentional, a bug, or something on my end.
Here is the structure of the components:
<template lang="pug">
#app
.container
h1 Form Experiment
FormGroup(@submit='onSubmit')
button.btn.btn-primary(type='submit') Submit
</template>
<script lang="ts">
import { defineComponent } from "vue"
import FormGroup from "@/components/FormGroup.vue"
export default defineComponent({
name: "App",
components: {
FormGroup,
},
setup() {
const onSubmit = (): void => {
alert("Parent event handler")
}
return { onSubmit }
}
})
</script>
FormGroup.vue:
<template lang="pug">
form(@submit.prevent='onFormSubmit', novalidate, autocomplete='on')
slot Content needed in FormGroup
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
name: "FormGroup",
setup(_, { emit }) {
const check = ref(true) // evaluated elsewhere - simplified for this example
const onFormSubmit = (): void => {
if (check.value) {
alert("Form is valid - sending event to parent")
emit("submit")
} else {
alert("Form is not valid.") // do not emit the event to parent
}
}
return { check, onFormSubmit }
}
})
</script>
Any thoughts on why onSubmit() in the parent triggers twice in Vue.js 3.0.0-rc.5?