Formular absenden und zurücksetzen
@submit.prevent, FormData, Formularzustand zurücksetzen, Absenden während des Ladens deaktivieren.
Formular absenden und zurücksetzen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Formularübermittlung verarbeiten
Ein echtes Formular muss Daten übermitteln, ohne die Seite neu zu laden, den Ladestatus verwalten und anschließend zurückgesetzt werden. Die Composition API und einige Direktiven machen das übersichtlich.
Das Neuladen der Seite verhindern
Standardmäßig lädt das Absenden eines Formulars die Seite neu. Der Modifikator .prevent bei @submit ruft preventDefault() auf, sodass Sie das Formular in JavaScript verarbeiten können.
<form @submit.prevent="onSubmit">
<button type="submit">Send</button>
</form>Ein reaktives Formularobjekt
Fassen Sie zusammengehörige Felder in einem reaktiven Objekt zusammen. Jede Eingabe verwendet v-model für eine Eigenschaft dieses Objekts.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
</script>
<template>
<input v-model="form.name" />
<input v-model="form.email" />
</template>Der Submit-Handler
Der Handler liest das reaktive Formular aus und sendet es. Da .prevent verwendet wird, bleibt die Seite unverändert.
<script setup>
async function onSubmit() {
await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(form)
})
}
</script>Den Ladestatus verfolgen
Fügen Sie eine loading-ref hinzu, damit die Benutzeroberfläche reagieren kann, während die Anfrage verarbeitet wird. Setzen Sie sie vor der Anfrage auf true und danach auf false.
<script setup>
import { ref, reactive } from 'vue'
const loading = ref(false)
const form = reactive({ name: '' })
</script>Die Schaltfläche während des Sendens deaktivieren
Binden Sie :disabled an loading, damit Benutzer das Formular nicht doppelt absenden können. Schalten Sie loading rund um den asynchronen Aufruf um.
<script setup>
async function onSubmit() {
loading.value = true
try { await save() } finally { loading.value = false }
}
</script>
<template>
<button type="submit" :disabled="loading">Send</button>
</template>Rückmeldung zur Übermittlung anzeigen
Verwenden Sie das Ladeflag, um den Schaltflächentext auszutauschen oder einen Spinner anzuzeigen. So erhalten Benutzer eine klare Rückmeldung, dass etwas passiert.
<template>
<button :disabled="loading">
{{ loading ? 'Sending...' : 'Send' }}
</button>
</template>Das Formular zurücksetzen
Um das Formular zu leeren, weisen Sie jedem Feld wieder seinen Anfangswert zu. Speichern Sie einen Snapshot des Ausgangszustands, damit das Zurücksetzen zuverlässig funktioniert.
<script setup>
import { reactive } from 'vue'
const initial = { name: '', email: '' }
const form = reactive({ ...initial })
function reset() { Object.assign(form, initial) }
</script>Zurücksetzen nach erfolgreichem Absenden
Rufen Sie reset auf, sobald die Anfrage erfolgreich war, damit Sie den nächsten Eintrag in einem leeren Formular eingeben können.
<script setup>
async function onSubmit() {
loading.value = true
try {
await save()
reset()
} finally { loading.value = false }
}
</script>Alles zusammenführen
Ein vollständiges Muster: Neuladen verhindern, reaktives Formular, Ladeschutz, deaktivierter Button und Zurücksetzen bei Erfolg – das Rückgrat der meisten Vue-Formulare.
Warum try/finally
Wenn Sie die asynchrone Arbeit in try/finally einschließen, wird loading auch dann zurückgesetzt, wenn die Anfrage einen Fehler auslöst. Andernfalls könnte ein fehlgeschlagenes Absenden den Button dauerhaft deaktiviert lassen.
Schnelltest
Testen Sie Ihr Wissen zum Absenden von Formularen.
Zusammenfassung
Die wichtigsten Grundlagen zum Absenden von Formularen:
@submit.preventverhindert das Neuladen der Seite.- Gruppieren Sie die Felder in einem reaktiven Objekt, das mit
v-modelverbunden ist. - Verfolgen Sie eine
loading-Referenz und binden Sie:disableddaran. - Setzen Sie die Felder zurück, indem Sie ihnen wieder ihre Anfangswerte zuweisen, idealerweise bei Erfolg.
- Verwenden Sie
try/finally, damit der Ladezustand immer zurückgesetzt wird.
Häufig gestellte Fragen
Ist die Lektion „Formular absenden und zurücksetzen“ kostenlos?
Ja — der vollständige Text von „Formular absenden und zurücksetzen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Formular absenden und zurücksetzen“?
@submit.prevent, FormData, Formularzustand zurücksetzen, Absenden während des Ladens deaktivieren. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Formular absenden und zurücksetzen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- v-model für alle Formularelemente
- Formular absenden und zurücksetzen
- Muster für manuelle Validierung
- VeeValidate für schema-basierte Validierung