如何在Vue 3中使用Vee Validate V4在script标签获取所有错误信息

VeeValidate V4提供了两种实用方式在script中获取全部错误信息，以下是具体实现：

方法一：使用useForm组合式函数（推荐） #

这是官方推荐的方式，直接在script setup中通过useForm获取响应式的错误对象：

<script setup>
import { useForm } from 'vee-validate';

// 初始化表单并解构出错误对象
const { errors } = useForm();

// 示例：打印所有错误
const printAllErrors = () => {
  // errors.value 是包含所有字段错误的响应式对象
  console.log('全部错误信息:', errors.value);
  // 若需要提取所有错误消息数组
  console.log('错误消息列表:', Object.values(errors.value));
};

// 监听错误变化（可选）
import { watch } from 'vue';
watch(errors, (updatedErrors) => {
  console.log('错误已更新:', updatedErrors);
}, { deep: true }); // 因为errors是嵌套对象，需开启深度监听
</script>

<template>
  <Form>
    <Field name="name" />
    <pre>{{ errors.name }}</pre>
    <button @click="printAllErrors">查看全部错误</button>
  </Form>
</template>

useForm返回的errors和<Form>插槽中提供的errors是同一个响应式对象，在script中通过errors.value即可访问所有字段的错误信息。

方法二：选项式API兼容方案 #

如果使用Vue 3选项式API，可在setup函数中返回错误对象，再在实例中访问：

<script>
import { useForm } from 'vee-validate';
import { watch } from 'vue';

export default {
  setup() {
    const { errors } = useForm();
    return { errors };
  },
  methods: {
    printAllErrors() {
      console.log('全部错误信息:', this.errors);
    }
  },
  created() {
    // 监听错误变化
    watch(this.errors, (updatedErrors) => {
      console.log('错误已更新:', updatedErrors);
    }, { deep: true });
  }
};
</script>

<template>
  <Form>
    <Field name="name" />
    <pre>{{ errors.name }}</pre>
    <button @click="printAllErrors">查看全部错误</button>
  </Form>
</template>

内容的提问来源于stack exchange，提问作者Mdr Kuchhadiya