When utilizing
the problem arises while attempting to validate a nested object and displaying an error.
An example was created based on the documentation.
However, when trying to include
:has-error="Boolean(formErrors.links?.twitter)"
an error occurs when showing the popup message.
The error states: Property 'twitter' does not exist on type 'string'Here is the component script:
<script setup lang="ts">
// imports...libs
// const { value: name } = useField('name')
// const { value: twitter } = useField('links.twitter');
// const { value: github } = useField('links.github');
const { values: fieldValues, errors: formErrors, handleSubmit } = useForm({
initialValues: {
name: '',
links: {
twitter: null,
github: null,
},
},
validationSchema: yup.object({
name: yup.string().required(),
links: yup.object({
twitter: yup.string().required().nullable(),
github: yup.string().required().nullable(),
})
})
})
const onSubmit = handleSubmit(values => {
//some logic
});
const loading = ref(false)
</script>
And the component HTML:
<template>
<form @submit="onSubmit">
<Field v-slot="{ field, errors }" name="name" type="text">
<VField label="name">
<VControl icon="feather:edit-2" :has-error="Boolean(formErrors.name)">
<input
v-bind="field"
class="input is-primary-focus"
type="text"
placeholder="imagesLtr"
autocomplete="name"
/>
<p v-if="errors" class="help is-danger">{{ formErrors.name }}</p>
</VControl>
</VField>
</Field>
<Field v-slot="{ field, errors }" name="links.twitter" type="text">
{{ field }}
<VField label="links.twitter">
<VControl icon="feather:edit-2" :has-error="Boolean(formErrors.links?.twitter)">
<input
v-bind="field"
class="input is-primary-focus"
type="text"
placeholder="Name"
autocomplete="twitter"
/>
<p v-if="errors" class="help is-danger">{{ formErrors.links?.twitter }}</p>
</VControl>
</VField>
</Field>
<button>Submit</button>
</form>
</template>