OnInvalidSubmit剂量在Vee-Validate版本中不起作用（^4.5.2）

Question

我正在尝试以形式捕获错误，并且必须以模式显示它们。但是Vee估计的OnInvaidSubmit似乎不起作用。请参阅下面的代码。

PS：我从

vue版本：3，vee-validate：4.5.11

<template>
  <Form v-slot="{ validate }" :validation-schema="schema">
    <Field name="email" type="email" />
    <ErrorMessage name="email" />
    <Field name="password" type="password" />
    <ErrorMessage name="password" />
    <button @click="validate">Submit</button>
  </Form>
</template>
<script>
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'
export default {
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    const schema = yup.object({
      email: yup.string().required().email(),
      password: yup.string().required().min(8),
    })
    return {
      schema,
    }
  },
  methods: {
    onSubmit(values) {
      // Submit values to API...
      alert(JSON.stringify(values, null, 2))
    },
    onInvalidSubmit({ values, errors, results }) {
      console.log(values) // current form values
      console.log(errors) // a map of field names and their first error message
      console.log(results) // a detailed map of field names and their validation results
    },
  },
}
</script>

Answer 1

通过将其添加到表单元素中来尝试以下内容。见下文

<Form v-slot="{ validate }" :validation-schema="schema" @invalid-submit="onInvalidSubmit">
  <Field name="email" type="email" />
  <ErrorMessage name="email" />
  <Field name="password" type="password" />
  <ErrorMessage name="password" />
  <button @click="validate">Submit</button>
</Form>