chore: use initialValues instead of ref

This commit is contained in:
sadeghbarati 2024-08-22 10:45:11 +03:30
parent 7c1c14c091
commit 8a4196607b
2 changed files with 10 additions and 8 deletions

View File

@ -15,14 +15,15 @@ import {
} from '@/lib/registry/default/ui/form'
import { toast } from '@/lib/registry/default/ui/toast'
const modelValue = ref(['Apple', 'Banana'])
const formSchema = toTypedSchema(z.object({
fruits: z.array(z.string()).min(1).max(3),
}))
const { handleSubmit } = useForm({
validationSchema: formSchema,
initialValues: {
fruits: ['Apple', 'Banana'],
},
})
const onSubmit = handleSubmit((values) => {
@ -35,12 +36,12 @@ const onSubmit = handleSubmit((values) => {
<template>
<form class="w-2/3 space-y-6" @submit="onSubmit">
<FormField v-slot="{ value }" v-model="modelValue" name="fruits">
<FormField v-slot="{ value }" name="fruits">
<FormItem>
<FormLabel>Fruits</FormLabel>
<FormControl>
<TagsInput :model-value="value">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item">
<TagsInputItem v-for="item in value" :key="item" :value="item">
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>

View File

@ -15,14 +15,15 @@ import {
} from '@/lib/registry/new-york/ui/form'
import { toast } from '@/lib/registry/new-york/ui/toast'
const modelValue = ref(['Apple', 'Banana'])
const formSchema = toTypedSchema(z.object({
fruits: z.array(z.string()).min(1).max(3),
}))
const { handleSubmit } = useForm({
validationSchema: formSchema,
initialValues: {
fruits: ['Apple', 'Banana'],
},
})
const onSubmit = handleSubmit((values) => {
@ -35,12 +36,12 @@ const onSubmit = handleSubmit((values) => {
<template>
<form class="w-2/3 space-y-6" @submit="onSubmit">
<FormField v-slot="{ value }" v-model="modelValue" name="fruits">
<FormField v-slot="{ value }" name="fruits">
<FormItem>
<FormLabel>Fruits</FormLabel>
<FormControl>
<TagsInput :model-value="value">
<TagsInputItem v-for="item in modelValue" :key="item" :value="item">
<TagsInputItem v-for="item in value" :key="item" :value="item">
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>