How can I get the Field meta in the Form?

[Vivi-Ornitier]

I need both Form meta and Field meta.

<Form v-slot="{ errors, meta }">
  <Field
    v-slot="{ meta }"
    type="text"
    maxlength="1"
    required
    rules="required|max:1"
    :class="{
      'text-error': meta.valid
    }"
  />
  
  <div v-if="meta.touched && !meta.valid">
    Form has errors.
  </div>
</Form>

1. I got ESLint: Variable 'meta' is already declared in the upper scope.(vue/no-template-shadow)
2. I can't get the Field meta.

Can anyone help me?

[logaretm]

You can rename destructed slot props

<Form v-slot="{ errors, meta: formMeta }">
  <Field
    v-slot="{ meta: fieldMeta }"
    type="text"
    maxlength="1"
    required
    rules="required|max:1"
    :class="{
      'text-error': meta.valid
    }"
  />
  
  <div v-if="formMeta.touched && ! formMeta.valid">
    Form has errors.
  </div>
</Form>

[Vivi-Ornitier]

@logaretm
Thank you for reply, but not worked.
I got console error.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'split')
    at setInPath (vee-validate.esm.js:175:23)
    at Object.stageInitialValue (vee-validate.esm.js:2190:9)
    at _useFieldValue (vee-validate.esm.js:877:10)
    at useFieldState (vee-validate.esm.js:813:54)
    at _useField (vee-validate.esm.js:1320:79)
    at useField (vee-validate.esm.js:1313:12)
    at setup (vee-validate.esm.js:1658:164)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7165:29)
    at setupComponent (runtime-core.esm-bundler.js:7120:11)

[logaretm]

That is unrelated. the Field component must have a name property passed to it. Which you didn't do in your initial snippet.

[Vivi-Ornitier]

Sorry, I missed.

Does fieldMeta need an Optional chaining operator?
An error will occur if the Optional chaining operator is not added.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'valid')
    at index.vue:65:47
    at renderList (runtime-core.esm-bundler.js:2893:22)
    at index.vue:74:17
    at Proxy.renderFnWithContext (runtime-core.esm-bundler.js:853:21)
    at normalizeChildren (vee-validate.esm.js:312:30)
    at Proxy.renderForm (vee-validate.esm.js:2520:30)
    at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5580:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at instance.update (runtime-core.esm-bundler.js:5694:56)

No error will occur.

fieldMeta?.valid

An error will occur.

fieldMeta.valid

[Vivi-Ornitier]

@logaretm

I'm sorry many times.
Such warnings are also output.

[Vue warn]: Property "fieldMeta" was accessed during render but is not defined on instance.

[Vivi-Ornitier]

I solved the problem.
Thank you very much.