4

I define vee-validate schema using composition api this way:

import { useForm, useField } from 'vee-validate'
import { object, string } from 'yup'

const { handleSubmit, errors } = useForm({
  validationSchema: object({
    currency: object().shape({
      name: string().notOneOf(['any'], errorMessages.required),
    }),
  }),
  // initialValues: {}
})
const { value: currency } = useField<SelectOption>('currency')

where

export type SelectOption = {
  name: string
  label?: string
}

Then I pass my data and error to a child component:

        <base-select
          v-model="currency"
          :options="currencies"
          :error="errors['currency.name']"
        />

And yes, errors contains currency.name at runtime and can't be accessed through errors.currency.name.

It builds just fine but after adding initial values like this

  initialValues: {
    currency: {
      name: 'any',
      label: 'Choose currency',
    },
  }

It produces an error

 Element implicitly has an 'any' type because expression of type '"currency.name"' can't be used to index
type 'Partial<Record<"currency", string | undefined>>'.
  Property 'currency.name' does not exist on type 'Partial<Record<"currency", string | undefined>>'.

50           :error="errors['currency.name']"

That is, currency has string type but should have SelectOption. Or errors should have currency.name in types. Or am I doing something wrong?

Also, I tried to define currency field as

const { value: currency } = reactive(useField<SelectOption>('currency'))

Made no difference

Packages used:

"vee-validate": "^4.6.6",
"yup": "^0.32.11"

0 Answers0