Envoi et réinitialisation des formulaires
@submit.prevent, FormData, réinitialisation de l’état du formulaire, désactivation de l’envoi pendant le chargement.
Envoi et réinitialisation des formulaires est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Gérer l’envoi d’un formulaire
Un vrai formulaire doit envoyer des données sans recharger la page, gérer l’état de chargement, puis être réinitialisé. L’API de composition et quelques directives rendent cela simple.
Empêcher le rechargement de la page
Par défaut, l’envoi d’un formulaire recharge la page. Le modificateur .prevent sur @submit appelle preventDefault(), ce qui vous permet de gérer l’envoi en JavaScript.
<form @submit.prevent="onSubmit">
<button type="submit">Send</button>
</form>Un objet de formulaire réactif
Regroupez les champs associés dans un seul objet réactif. Chaque champ utilise v-model sur une propriété de cet objet.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
</script>
<template>
<input v-model="form.name" />
<input v-model="form.email" />
</template>Le gestionnaire d’envoi
Le gestionnaire lit le formulaire réactif et l’envoie. Comme le modificateur .prevent est utilisé, la page reste en place.
<script setup>
async function onSubmit() {
await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(form)
})
}
</script>Suivre l’état de chargement
Ajoutez une référence loading afin que l’interface puisse réagir pendant l’exécution de la requête. Activez-la avant la requête et désactivez-la après.
<script setup>
import { ref, reactive } from 'vue'
const loading = ref(false)
const form = reactive({ name: '' })
</script>Désactiver le bouton pendant l’envoi
Liez :disabled à loading afin d’empêcher les utilisateurs d’envoyer le formulaire deux fois. Activez ou désactivez loading autour de l’appel asynchrone.
<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>Afficher un retour après l’envoi
Utilisez l’indicateur de chargement pour remplacer le texte du bouton ou afficher un indicateur d’attente, afin d’informer clairement les utilisateurs qu’une opération est en cours.
<template>
<button :disabled="loading">
{{ loading ? 'Sending...' : 'Send' }}
</button>
</template>Réinitialiser le formulaire
Pour vider le formulaire, réaffectez à chaque champ sa valeur initiale. Conservez une copie initiale afin que la réinitialisation soit fiable.
<script setup>
import { reactive } from 'vue'
const initial = { name: '', email: '' }
const form = reactive({ ...initial })
function reset() { Object.assign(form, initial) }
</script>Réinitialisation après un envoi réussi
Appelez reset une fois la requête réussie afin que l’utilisateur puisse effectuer la saisie suivante dans un formulaire vierge.
<script setup>
async function onSubmit() {
loading.value = true
try {
await save()
reset()
} finally { loading.value = false }
}
</script>Tout assembler
Un modèle complet : empêcher le rechargement, utiliser un formulaire réactif, prévoir une protection contre le chargement, désactiver le bouton et réinitialiser après la réussite — la base de la plupart des formulaires Vue.
Pourquoi utiliser try/finally
En plaçant le traitement asynchrone dans try/finally, vous vous assurez que loading est réinitialisé même si la requête échoue. Sinon, un envoi ayant échoué pourrait laisser le bouton désactivé définitivement.
Vérification rapide
Testez vos connaissances sur l’envoi.
Récapitulatif
Les éléments essentiels de l’envoi d’un formulaire :
@submit.preventempêche le rechargement de la page.- Regroupez les champs dans un objet réactif lié avec
v-model. - Suivez une référence
loadinget liez-lui:disabled. - Réinitialisez le formulaire en réaffectant aux champs leurs valeurs initiales, idéalement après une réussite.
- Utilisez
try/finallyafin que le chargement soit toujours réinitialisé.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Envoi et réinitialisation des formulaires » est-elle gratuite ?
Oui — le texte complet de « Envoi et réinitialisation des formulaires » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Envoi et réinitialisation des formulaires » ?
@submit.prevent, FormData, réinitialisation de l’état du formulaire, désactivation de l’envoi pendant le chargement. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Envoi et réinitialisation des formulaires » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- v-model sur tous les éléments de formulaire
- Envoi et réinitialisation des formulaires
- Stratégies de validation manuelle
- VeeValidate pour la validation fondée sur un schéma