Обработка события отправки в дочернем элементе, а затем в родительском в Vue с помощью Composition API - PullRequest
Новая
       112

Обработка события отправки в дочернем элементе, а затем в родительском в Vue с помощью Composition API

0 голосов
/ 04 августа 2020

Новое в Vue. js и попытка обработать событие отправки в компоненте, представляющем форму, которая будет проверять действительность дочерних компонентов и передавать обработку обработчику событий в родительском, если все выглядит хорошо.

Я получаю эту ошибку ... [Vue warn]: Ошибка в обработчике v-on: «TypeError: undefined не является объектом (оценка '$ event.preventDefault')» обнаружена в --- > в src / components / MyForm. vue в src / App. vue

Дочерний компонент - это 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
    }
  },
})

Родительский компонент (приложение) ... 

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

В качестве альтернативы, не лучше ли передать функцию onSubmit () приложения в качестве опоры MyForm? Я мог бы выполнить проверку в MyForm, а затем вызвать переданную функцию?

1 Ответ

0 голосов
/ 11 августа 2020

TL; DR:

Удалите .prevent из родительского приложения.

Объяснение:

Как упоминалось в комментариях, вам не нужен .prevent в вашем собственном родительском компоненте. .prevent на событиях в основном предотвращает распространение события по умолчанию. Так, например, в вашем form(@submit.prevent='onFormSubmit', когда ваша форма обычно отправляется (например, нажатием клавиши ввода), обычное событие отправки предотвращается, и вместо этого вызывается ваш метод onFormSubmit.

Однако в родительском компоненте события по умолчанию javascript не существует. Это объясняет, почему у вас была ошибка TypeError: undefined is not an object (evaluating '$event.preventDefault') - нет $event, поэтому это undefined. И undefined не является объектом.

...