Vue Academy · Урок

Отправка и сброс формы

@submit.prevent, FormData, сброс состояния формы, отключение отправки во время загрузки

«Отправка и сброс формы» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Обработка отправки form

Настоящий элемент form должен отправлять данные без перезагрузки страницы, управлять состоянием загрузки и после этого сбрасываться. API композиции и несколько директив позволяют сделать это аккуратно.

Остановка перезагрузки страницы

По умолчанию отправка form перезагружает страницу. Модификатор .prevent у @submit вызывает preventDefault(), чтобы Вы могли обработать отправку в JavaScript.

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

Реактивный объект form

Объединяйте связанные поля в один реактивный объект. Каждый input использует v-model для свойства этого объекта.

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

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

Обработчик отправки

Обработчик читает реактивный form и отправляет его. Поскольку применяется модификатор .prevent, страница остаётся на месте.

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

Отслеживание состояния загрузки

Добавьте реф loading, чтобы интерфейс мог реагировать, пока выполняется запрос. Установите его перед запросом и сбросьте после него.

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

Отключение кнопки во время отправки

Свяжите :disabled с loading, чтобы пользователи не могли отправить форму дважды. Переключайте состояние loading до и после асинхронного вызова.

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

Отображение обратной связи об отправке

Используйте флаг загрузки, чтобы заменить текст кнопки или показать индикатор, ясно сообщая пользователям, что операция выполняется.

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

Сброс формы

Чтобы очистить форму, снова присвойте каждому полю его значение initial. Сохраняйте снимок initial, чтобы сброс выполнялся надёжно.

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

Сброс после успешной отправки

После успешного выполнения запроса вызовите reset, чтобы пользователь мог ввести следующую запись в чистой форме.

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

Собираем всё вместе

Полный подход: предотвращение перезагрузки, реактивная форма, защита от повторной отправки во время загрузки, отключённая кнопка и сброс после успеха — основа большинства форм Vue.

Зачем нужен try/finally

Обёртка асинхронной операции в try/finally гарантирует, что loading будет сброшен, даже если запрос вызовет исключение. В противном случае неудачная отправка может оставить кнопку навсегда отключённой.

Быстрая проверка

Проверьте свои знания об отправке формы.

Итоги

Основы отправки формы:

@submit.prevent предотвращает перезагрузку страницы.
Объединяйте поля в реактивном объекте, связанном с помощью v-model.
Отслеживайте ссылку loading и связывайте с ней :disabled.
Сбрасывайте форму, снова присваивая полям значения initial, желательно после успешного выполнения.
Используйте try/finally, чтобы состояние загрузки всегда сбрасывалось.

Часто задаваемые вопросы

Урок «Отправка и сброс формы» бесплатный?

Да — полный текст урока «Отправка и сброс формы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Отправка и сброс формы»?

@submit.prevent, FormData, сброс состояния формы, отключение отправки во время загрузки Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Отправка и сброс формы»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy