Envío y restablecimiento de formularios
@submit.prevent, FormData, restablecimiento del estado del formulario y desactivación del envío durante la carga.
Envío y restablecimiento de formularios es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Gestionar el envío de formularios
Un formulario real debe enviar datos sin volver a cargar la página, gestionar el estado de carga y restablecerse después. La Composition API y algunas directivas permiten hacerlo de forma sencilla.
Evitar que se recargue la página
De forma predeterminada, el envío de un formulario vuelve a cargar la página. El modificador .prevent en @submit llama a preventDefault() para que pueda gestionarlo en JavaScript.
<form @submit.prevent="onSubmit">
<button type="submit">Send</button>
</form>Un objeto de formulario reactivo
Agrupe los campos relacionados en un único objeto reactivo. Cada entrada usa v-model sobre una propiedad de ese objeto.
<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', email: '' })
</script>
<template>
<input v-model="form.name" />
<input v-model="form.email" />
</template>El controlador de envío
El controlador lee el formulario reactivo y lo envía. Como tiene aplicado .prevent, la página no cambia.
<script setup>
async function onSubmit() {
await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(form)
})
}
</script>Seguir el estado de carga
Añada una ref loading para que la interfaz pueda reaccionar mientras la solicitud está en curso. Establézcala en true antes de la solicitud y en false después.
<script setup>
import { ref, reactive } from 'vue'
const loading = ref(false)
const form = reactive({ name: '' })
</script>Desactivar el botón durante el envío
Enlace :disabled a loading para impedir que los usuarios envíen el formulario dos veces. Cambie el valor de loading antes y después de la llamada asíncrona.
<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>Mostrar comentarios sobre el envío
Use el indicador de carga para cambiar el texto del botón o mostrar un spinner, de modo que los usuarios sepan claramente que se está realizando una operación.
<template>
<button :disabled="loading">
{{ loading ? 'Sending...' : 'Send' }}
</button>
</template>Restablecer el formulario
Para borrar el formulario, vuelva a asignar a cada campo su valor inicial. Conserve una instantánea inicial para que el restablecimiento sea fiable.
<script setup>
import { reactive } from 'vue'
const initial = { name: '', email: '' }
const form = reactive({ ...initial })
function reset() { Object.assign(form, initial) }
</script>Restablecer después de un envío correcto
Llame a reset cuando la solicitud se complete correctamente para que el usuario pueda introducir el siguiente registro desde cero.
<script setup>
async function onSubmit() {
loading.value = true
try {
await save()
reset()
} finally { loading.value = false }
}
</script>Unirlo todo
Un patrón completo: evitar la recarga, usar un formulario reactivo, controlar la carga, deshabilitar el botón y restablecer tras el éxito: la base de la mayoría de los formularios de Vue.
Por qué usar try/finally
Envolver el trabajo asíncrono en try/finally garantiza que loading se restablezca incluso si la solicitud genera una excepción. De lo contrario, un envío fallido podría dejar el botón deshabilitado permanentemente.
Comprobación rápida
Compruebe sus conocimientos sobre el envío de formularios.
Recapitulación
Aspectos esenciales del envío de formularios:
@submit.preventevita que se recargue la página.- Agrupe los campos en un objeto reactivo enlazado con
v-model. - Controle un
loadingref y vincule:disableda él. - Restablezca los campos volviendo a asignarles sus valores iniciales, preferiblemente cuando la operación se complete correctamente.
- Use
try/finallypara que la carga siempre se restablezca.
Preguntas frecuentes
¿La lección «Envío y restablecimiento de formularios» es gratis?
Sí — el texto completo de «Envío y restablecimiento de formularios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Envío y restablecimiento de formularios»?
@submit.prevent, FormData, restablecimiento del estado del formulario y desactivación del envío durante la carga. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Envío y restablecimiento de formularios»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- v-model en todos los elementos de formulario
- Envío y restablecimiento de formularios
- Patrones de validación manual
- VeeValidate para validación basada en esquemas