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"