Vue Academy · Lezione

Invio e reset dei form

@submit.prevent, FormData, reset dello stato del form, disabilitazione dell'invio durante il caricamento

Invio e reset dei form è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Gestire l'invio di un modulo

Un modulo reale deve inviare i dati senza ricaricare la pagina, gestire lo stato di caricamento e reimpostarsi al termine. La Composition API e alcune direttive rendono tutto semplice.

Impedire il ricaricamento della pagina

Per impostazione predefinita, l'invio di un modulo ricarica la pagina. Il modificatore .prevent su @submit chiama preventDefault(), così può gestire l'invio in JavaScript.

<form @submit.prevent="onSubmit">
  <button type="submit">Send</button>
</form>

Un oggetto reattivo per il modulo

Raggruppi i campi correlati in un unico oggetto reattivo. Ogni input utilizza v-model su una proprietà di quell'oggetto.

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
</script>

<template>
  <input v-model="form.name" />
  <input v-model="form.email" />
</template>

Il gestore dell'invio

Il gestore legge il modulo reattivo e lo invia. Poiché è stato applicato .prevent, la pagina non viene ricaricata.

<script setup>
async function onSubmit() {
  await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(form)
  })
}
</script>

Monitorare lo stato di caricamento

Aggiunga un ref loading, così l'interfaccia può reagire mentre la richiesta è in corso. Lo imposti su true prima della richiesta e su false dopo.

<script setup>
import { ref, reactive } from 'vue'
const loading = ref(false)
const form = reactive({ name: '' })
</script>

Disabilitare il pulsante durante l'invio

Associ :disabled a loading, così gli utenti non possono inviare il modulo due volte. Inverti il valore di loading prima e dopo la chiamata asincrona.

<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>

Mostrare un feedback sull'invio

Utilizzi il flag di caricamento per alternare il testo del pulsante o mostrare uno spinner, offrendo agli utenti un'indicazione chiara che l'operazione è in corso.

<template>
  <button :disabled="loading">
    {{ loading ? 'Sending...' : 'Send' }}
  </button>
</template>

Reimpostare il modulo

Per svuotare il modulo, riassegni ogni campo al suo valore iniziale. Conservi una copia dello stato iniziale per garantire un ripristino affidabile.

<script setup>
import { reactive } from 'vue'
const initial = { name: '', email: '' }
const form = reactive({ ...initial })
function reset() { Object.assign(form, initial) }
</script>

Reimpostazione dopo un invio riuscito

Chiami reset quando la richiesta ha esito positivo, così l'utente può inserire il dato successivo partendo da un modulo vuoto.

<script setup>
async function onSubmit() {
  loading.value = true
  try {
    await save()
    reset()
  } finally { loading.value = false }
}
</script>

Riunire tutti gli elementi

Un modello completo: impedire il ricaricamento, usare un modulo reattivo, gestire lo stato di caricamento, disabilitare il pulsante e reimpostare il modulo dopo il successo: la struttura portante della maggior parte dei moduli Vue.

Perché usare try/finally

Racchiudere il lavoro asincrono in try/finally garantisce che loading venga reimpostato anche se la richiesta genera un'eccezione. In caso contrario, un invio non riuscito potrebbe lasciare il pulsante disabilitato per sempre.

Verifica rapida

Verifichi le Sue conoscenze sull'invio dei moduli.

Riepilogo

Elementi essenziali dell'invio di un modulo:

@submit.prevent impedisce il ricaricamento della pagina.
Raggruppi i campi in un oggetto reattivo associato tramite v-model.
Tenga traccia di un ref loading e lo associ a :disabled.
Reimposti il modulo riassegnando ai campi i valori iniziali, idealmente dopo un invio riuscito.
Utilizzi try/finally per garantire che lo stato di caricamento venga sempre reimpostato.

Domande Frequenti

La lezione «Invio e reset dei form» è gratuita?

Sì — il testo completo di «Invio e reset dei form» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Invio e reset dei form»?

@submit.prevent, FormData, reset dello stato del form, disabilitazione dell'invio durante il caricamento Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Invio e reset dei form»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

v-model su tutti gli elementi dei form
Invio e reset dei form
Pattern di validazione manuale
VeeValidate per la validazione basata su schema

← Torna a Vue Academy