How to get all error messages in script tag by using Vee validate V4 in vue 3

Question

I Am using Vue 3 with vee-validate V4, and I am unable to get all error messages inside the script tag. Is there any way to get all error messages inside the script tag?

<Form v-slot="{ errors }">
  <Field name="name" />
  <pre>
    {{ errors.name }}
  </pre>
</Form>

How do get all errors in the script tag?

Answer 1

The Form errors only has one error per field, no way around that. Each field has it's own errors which is an array (and you can access that inside the Field via v-slot={ errors }).

You may want to call this.$refs.form.validateField() on each field and the result for that gives you an errors array which you could save into your data to show in the template:

<template>
    <Form ref="form">
      <Field name="name" @change="getAllErrors"/>
      <pre>
        {{ errors.name }}
      </pre>
    </Form>
</template>

<script>
export default {
  data() {
     return {
       allErrors: []
     }
  },
  methods: {
    getAllErrors() {
      this.$refs.form.validateField('name').then((valid, errors) => {
         if (valid) {
            this.allErrors = [];
         } else {
            this.allErrors = errors;
         }
      });
    }
  }
}
</script>