I’m using Typescript, Vue and Vee-Validate. I’m trying to build a reusable input component and it works with one input component. But I can’t insert more than one component. I tried a few things, but it didn’t work.
Does anyone have an idea how to customize the code for multiple components?
Here is parent component
<script lang="ts">
import { Form, useField, useForm } from 'vee-validate'
import { string } from 'yup'
export default defineComponent({
components: {}
})
</script>
<script lang="ts" setup>
const label: string = 'First Field'
const { handleSubmit, errors } = useForm({
validationSchema: {
query: string().required('required.'),
},
initialValues: {
query: '',
},
})
const { value: query } = useField<string>('query')
const onSubmit = handleSubmit(async () => {
alert('Well Done')
})
</script>
<template>
<main class="min-h-screen">
<div class="base-container">
Content
</div>
<Form @submit.prevent>
<ChildComponent v-model="query" :label="label" placeholder="Yo" :error="errors.query" />
<button class="bg-red-500 text-white text-sm px-4 py-2 mt-10 rounded-lg"
type="submit"
@click="onSubmit"
>
Submit
</button>
</Form>
</main>
</template>