Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: use initialValues instead of ref

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue
View File

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

9
apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue
View File

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