FieldError

FieldError displays the first message from an issue array, or from any object that has an errors array, such as a field, an array field, or an array item. It renders no element when there is no message.

Usage

Pass a field directly:

<template>
  <Field
    v-slot="{ field }"
    :field="form.field('email')"
  >
    <label :for="field.path">Email</label>

    <input
      v-bind="field.events"
      :id="field.path"
      v-model="field.model"
      type="email"
    >

    <FieldError :errors="field" />
  </Field>
</template>

Or pass an issue array:

<template>
  <FieldError
    :errors="form.errors"
    as="p"
    role="alert"
  />
</template>

Props

Attributes other than errors and as are forwarded to the rendered element or component. Use class, id, role, and aria-* to match your styling and accessibility needs.

Slot

The default slot receives message. Use it to wrap or decorate the text.

<template>
  <FieldError
    :errors="field"
    as="p"
    role="alert"
  >
    <template #default="{ message }">
      <strong>Check this value:</strong> {{ message }}
    </template>
  </FieldError>
</template>

When as is a component, the message is passed as its default slot content. That component must render its default slot.

Notes

• Which issues a field shows: exactly those at its own path. An issue on a parent path or without a path is not shown. See Errors.
• To display every message, render field.errors yourself.
• Pass :errors="arrayField" to show array-level issues such as a minimum item count.

Related

• Errors guide