Handle submit event in child then parent in Vue using Composition API

Question

New to Vue.js and trying to handle a submit event in a component representing a form that will check validity of child components and pass on processing to an event handler in the parent if everything looks good.

I'm getting this error... [Vue warn]: Error in v-on handler: "TypeError: undefined is not an object (evaluating '$event.preventDefault')" found in ---> at src/components/MyForm.vue at src/App.vue

Child component is MyForm...

<template lang="pug">
  form(@submit.prevent='onFormSubmit', novalidate, autocomplete='on')
    slot Content needed in MyForm
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api"
export default defineComponent({
  name: "MyForm",
  setup(_, { emit }) {
    const onFormSubmit = () => {
      console.log("MyForm:onFormSubmit() - called first")
      // Validate child components, if invalid, STOP, otherwise continue...
      emit("submit") // errors
    }
  },
})

Parent component (App)...

<template lang="pug">
#app
  .container
    MyForm(@submit.prevent='onSubmit')
      ...other components
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api"
import MyForm from "@/components/MyForm.vue"

export default defineComponent({
  name: "App",
  components: {
    MyForm,
  },
  setup() {
    const onSubmit = (): void => {
      console.log("App.vue:onSubmit() - called second")
    }
    return { onSubmit }
  }
</script>

Alternatively, would it be better to pass App's onSubmit() function as a prop to MyForm? I could do the validation in MyForm then call the passed-in function?

You should post that error as well. You dont need `.prevent` from `@submit` in your parent component, as you are not handling a form submit but a custom component event. So just do `@submit="onSubmit"` in your parent. Don't know if that fixes the error though as I have no idea what your error is. To make things clearer you might rename the emitted event to something like `validSubmit` — Matthias S, Aug 04 '20 at 16:34
Thanks Matthias! The issue was the .prevent on the parent. To make my issue more complete, I included the error above. Do you want to post your advice as a solution so I can mark it correct? — nstuyvesant, Aug 04 '20 at 17:21

score 0 · Answer 1 · answered Aug 11 '20 at 15:31

TL;DR:

Remove .prevent from your parent app.

Explanation:

As mentioned in the comments, you don't need the .prevent in your own parent component. The .prevent on events basically prevents the default event to propagate. So for example, in your form(@submit.prevent='onFormSubmit', when your form would normally be submitted (e.g. by pressing enter), the normal submit event is prevented and instead your method onFormSubmit is called.

In your parent component though, there is no default javascript event to prevent. That explains why you had the error TypeError: undefined is not an object (evaluating '$event.preventDefault') - there is no $event, so it is undefined. And undefined is not an object.

Handle submit event in child then parent in Vue using Composition API

1 Answers1