Vue Academy · Aula

Envio e redefinição de formulários

@submit.prevent, FormData, redefinição do estado do formulário e desativação do envio durante o carregamento.

Envio e redefinição de formulários é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Processando o envio do form

Um form real precisa enviar dados sem recarregar a página, gerenciar o estado de carregamento e ser redefinido depois. A API de composição e algumas diretivas tornam isso simples.

Impedindo o recarregamento da página

Por padrão, o envio de um form recarrega a página. O modificador .prevent em @submit chama preventDefault() para que você possa tratar o envio em JavaScript.

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

Um objeto reativo para o form

Agrupe os campos relacionados em um único objeto reativo. Cada campo de entrada usa v-model em uma propriedade desse 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>

A função de tratamento do envio

A função de tratamento lê o form reativo e o envia. Como o modificador .prevent foi aplicado, a página permanece no lugar.

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

Acompanhando o estado de carregamento

Adicione uma referência loading para que a interface possa reagir enquanto a solicitação está em andamento. Defina-a como verdadeira antes da solicitação e como falsa depois.

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

Desativando o botão durante o envio

Vincule :disabled a loading para impedir que os usuários enviem o form duas vezes. Alterne loading antes e depois da chamada assí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>

Exibindo um retorno sobre o envio

Use o sinalizador de carregamento para trocar o texto do botão ou exibir um indicador de carregamento, fornecendo aos usuários um retorno claro de que algo está acontecendo.

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

Redefinindo o form

Para limpar o formulário, atribua novamente a cada campo seu valor inicial. Mantenha um instantâneo do estado inicial para que a redefinição seja confiável.

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

Redefinição após um envio bem-sucedido

Chame reset quando a requisição for bem-sucedida, para que o usuário possa inserir o próximo registro a partir de um estado limpo.

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

Juntando tudo

Um padrão completo: impedir a recarga, usar um formulário reativo, proteger contra o carregamento, desabilitar o botão e redefinir após o sucesso — a base da maioria dos formulários Vue.

Por que usar try/finally

Envolver o trabalho assíncrono em try/finally garante que loading seja redefinido mesmo que a requisição lance uma exceção. Caso contrário, um envio malsucedido poderia deixar o botão permanentemente desabilitado.

Verificação rápida

Teste seus conhecimentos sobre o envio de formulários.

Recapitulação

Noções essenciais sobre o envio de formulários:

@submit.prevent impede a recarga da página.
Agrupe os campos em um objeto reativo vinculado com v-model.
Acompanhe uma ref loading e vincule :disabled a ela.
Redefina atribuindo novamente aos campos seus valores iniciais, de preferência após o sucesso.
Use try/finally para que o carregamento seja sempre redefinido.

Perguntas Frequentes

A aula “Envio e redefinição de formulários” é grátis?

Sim — o texto completo de “Envio e redefinição de formulários” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Envio e redefinição de formulários”?

@submit.prevent, FormData, redefinição do estado do formulário e desativação do envio durante o carregamento. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Envio e redefinição de formulários”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

v-model em todos os elementos de formulário
Envio e redefinição de formulários
Padrões de validação manual
VeeValidate para validação baseada em esquemas

← Voltar para Vue Academy