Skicka och återställa formulär
@submit.prevent, FormData, återställa formulärtillstånd, inaktivera skickaknappen under laddning.
Skicka och återställa formulär är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Hantera formulärinskickning
Ett riktigt formulär behöver skicka data utan att ladda om sidan, hantera laddningstillstånd och återställas efteråt. Composition API tillsammans med några direktiv gör detta enkelt.
Förhindra att sidan laddas om
Som standard laddas sidan om när ett formulär skickas. Modifieraren .prevent på @submit anropar preventDefault(), så att ni kan hantera formuläret i JavaScript.
<form @submit.prevent="onSubmit">
<button type="submit">Send</button>
</form>Ett reaktivt formulärobjekt
Samla relaterade fält i ett reaktivt objekt. Varje inmatningsfält använder v-model på en egenskap i objektet.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
</script>
<template>
<input v-model="form.name" />
<input v-model="form.email" />
</template>Skickahanteraren
Hanteraren läser det reaktiva formuläret och skickar det. Eftersom .prevent används ligger sidan kvar.
<script setup>
async function onSubmit() {
await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(form)
})
}
</script>Spåra laddningstillstånd
Lägg till en loading-ref så att gränssnittet kan reagera medan förfrågan pågår. Sätt den till true före förfrågan och till false efteråt.
<script setup>
import { ref, reactive } from 'vue'
const loading = ref(false)
const form = reactive({ name: '' })
</script>Inaktivera knappen under inskickning
Bind :disabled till loading så att användare inte kan skicka formuläret flera gånger. Växla loading före och efter det asynkrona anropet.
<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>Visa återkoppling efter inskickning
Använd laddningsflaggan för att byta knapptext eller visa en spinner, så att användarna tydligt ser att något händer.
<template>
<button :disabled="loading">
{{ loading ? 'Sending...' : 'Send' }}
</button>
</template>Återställ formuläret
Återställ formuläret genom att tilldela varje fält dess ursprungliga värde igen. Spara en ögonblicksbild av startvärdena så att återställningen blir tillförlitlig.
<script setup>
import { reactive } from 'vue'
const initial = { name: '', email: '' }
const form = reactive({ ...initial })
function reset() { Object.assign(form, initial) }
</script>Efter en lyckad inskickning
Anropa reset när begäran har lyckats, så att användaren kan fylla i nästa formulär från början.
<script setup>
async function onSubmit() {
loading.value = true
try {
await save()
reset()
} finally { loading.value = false }
}
</script>Att sätta ihop allt
Ett komplett mönster: förhindra omladdning, använd ett reaktivt formulär, skydda mot upprepade inskickningar, inaktivera knappen och återställ vid lyckat resultat – ryggraden i de flesta Vue-formulär.
Varför try/finally
Omge det asynkrona arbetet med try/finally för att säkerställa att loading återställs även om begäran kastar ett undantag. Annars kan en misslyckad inskickning lämna knappen permanent inaktiverad.
Snabbtest
Testa dina kunskaper om inskickning.
Sammanfattning
Det viktigaste vid inskickning av formulär:
@submit.preventförhindrar att sidan laddas om.- Samla fälten i ett reaktivt objekt som binds med
v-model. - Spåra en
loading-ref och bind:disabledtill den. - Återställ genom att tilldela fälten deras ursprungliga värden igen, helst när inskickningen lyckas.
- Använd
try/finallyså att laddningen alltid återställs.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Skicka och återställa formulär” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Skicka och återställa formulär”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skicka och återställa formulär”?
@submit.prevent, FormData, återställa formulärtillstånd, inaktivera skickaknappen under laddning. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Skicka och återställa formulär”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- v-model på alla formulärelement
- Skicka och återställa formulär
- Mönster för manuell validering
- VeeValidate för schemabaserad validering