Auf dieser Seite
Arrays
TanStack Form unterstützt Arrays als Werte in einem Formular, einschließlich Unterobjektwerten innerhalb eines Arrays.
Grundlegende Verwendung
Um ein Array zu verwenden, können Sie field.state.value für einen Array-Wert in Verbindung mit Index aus solid-js verwenden.
vue
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
const form = useForm({
defaultValues: {
people: [] as Array<{ age: number; name: string }>,
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
})
</script>
<template>
<form.Field name="people">
<template v-slot="{ field, state }">
<div>
<form.Field
v-for="(_, i) of field.state.value"
:key="i"
:name="`people[${i}].name`"
>
<template v-slot="{ field: subField, state }">
<!-- ... -->
</template>
</form.Field>
</div>
</template>
</form.Field>
</template>
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
const form = useForm({
defaultValues: {
people: [] as Array<{ age: number; name: string }>,
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
})
</script>
<template>
<form.Field name="people">
<template v-slot="{ field, state }">
<div>
<form.Field
v-for="(_, i) of field.state.value"
:key="i"
:name="`people[${i}].name`"
>
<template v-slot="{ field: subField, state }">
<!-- ... -->
</template>
</form.Field>
</div>
</template>
</form.Field>
</template>
Dadurch wird jedes Mal, wenn Sie pushValue auf field ausführen, der gemappte Slot generiert.
vue
<button @click="field.pushValue({ name: '', age: 0 })" type="button">
Add person
</button>
<button @click="field.pushValue({ name: '', age: 0 })" type="button">
Add person
</button>
Schließlich können Sie ein Unterfeld wie folgt verwenden
vue
<form.Field
v-for="(_, i) of field.state.value"
:key="i"
:name="`people[${i}].name`"
>
<template v-slot="{ field: subField, state }">
<div>
<label>
<div>Name for person {{ i }}</div>
<input
:value="subField.state.value"
@input="
(e) =>
subField.handleChange(
(e.target as HTMLInputElement).value,
)
"
/>
</label>
</div>
</template>
</form.Field>
<form.Field
v-for="(_, i) of field.state.value"
:key="i"
:name="`people[${i}].name`"
>
<template v-slot="{ field: subField, state }">
<div>
<label>
<div>Name for person {{ i }}</div>
<input
:value="subField.state.value"
@input="
(e) =>
subField.handleChange(
(e.target as HTMLInputElement).value,
)
"
/>
</label>
</div>
</template>
</form.Field>
Vollständiges Beispiel
vue
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
const form = useForm({
defaultValues: {
people: [] as Array<{ age: number; name: string }>,
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
})
</script>
<template>
<form
@submit="
(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}
"
>
<div>
<form.Field name="people">
<template v-slot="{ field, state }">
<div>
<form.Field
v-for="(_, i) of field.state.value"
:key="i"
:name="`people[${i}].name`"
>
<template v-slot="{ field: subField, state }">
<div>
<label>
<div>Name for person {{ i }}</div>
<input
:value="subField.state.value"
@input="
(e) =>
subField.handleChange(
(e.target as HTMLInputElement).value,
)
"
/>
</label>
</div>
</template>
</form.Field>
<button
@click="field.pushValue({ name: '', age: 0 })"
type="button"
>
Add person
</button>
</div>
</template>
</form.Field>
</div>
<form.Subscribe>
<template v-slot="{ canSubmit, isSubmitting }">
<button type="submit" :disabled="!canSubmit">
{{ isSubmitting ? '...' : 'Submit' }}
</button>
</template>
</form.Subscribe>
</form>
</template>
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
const form = useForm({
defaultValues: {
people: [] as Array<{ age: number; name: string }>,
},
onSubmit: ({ value }) => alert(JSON.stringify(value)),
})
</script>
<template>
<form
@submit="
(e) => {
e.preventDefault()
e.stopPropagation()
form.handleSubmit()
}
"
>
<div>
<form.Field name="people">
<template v-slot="{ field, state }">
<div>
<form.Field
v-for="(_, i) of field.state.value"
:key="i"
:name="`people[${i}].name`"
>
<template v-slot="{ field: subField, state }">
<div>
<label>
<div>Name for person {{ i }}</div>
<input
:value="subField.state.value"
@input="
(e) =>
subField.handleChange(
(e.target as HTMLInputElement).value,
)
"
/>
</label>
</div>
</template>
</form.Field>
<button
@click="field.pushValue({ name: '', age: 0 })"
type="button"
>
Add person
</button>
</div>
</template>
</form.Field>
</div>
<form.Subscribe>
<template v-slot="{ canSubmit, isSubmitting }">
<button type="submit" :disabled="!canSubmit">
{{ isSubmitting ? '...' : 'Submit' }}
</button>
</template>
</form.Subscribe>
</form>
</template>
Unsere Partner
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.
Bytes abonnieren
Ihre wöchentliche Dosis JavaScript-Nachrichten. Jeden Montag kostenlos an über 100.000 Entwickler geliefert.