Як працювати з формами в Inertia через useForm?

useForm - помічник Inertia для форм: зберігає дані, стан відправки, помилки валідації й прогрес завантаження.

<script setup>
import { useForm } from '@inertiajs/vue3';

const form = useForm({
  title: '',
  body: '',
  cover: null,
});

function submit() {
  form.post('/posts', {
    preserveScroll: true,
    onSuccess: () => form.reset(),
  });
}
</script>

<template>
  <form @submit.prevent="submit">
    <input v-model="form.title">
    <p v-if="form.errors.title">{{ form.errors.title }}</p>

    <textarea v-model="form.body" />

    <input type="file" @input="form.cover = $event.target.files[0]">
    <progress v-if="form.progress" :value="form.progress.percentage" max="100" />

    <button :disabled="form.processing">Опублікувати</button>
  </form>
</template>

Що дає useForm:

методи відправки: get, post, put, patch, delete;
form.errors - помилки валідації Laravel заповнюються автоматично;
form.processing - чи йде відправка (захист від подвійного кліку);
form.isDirty - чи змінювали форму; wasSuccessful, recentlySuccessful (дві секунди після успіху - для «Збережено»);
reset(), clearErrors(), resetAndClearErrors(), defaults();
transform() - змінити дані перед відправкою.

Файли. Якщо в даних є файл, Inertia сама перетворить їх на FormData. Але для put/patch з файлами PHP не розбирає multipart - відправляють post з _method: 'put'.

Валідація на сервері - звичайна:

public function store(Request $request)
{
    $validated = $request->validate(['title' => 'required|max:255', 'body' => 'required']);
    // при помилці Laravel поверне назад, а Inertia покладе помилки у form.errors
}

Корисне: useForm('CreatePost', {...}) з ключем зберігає дані форми в історії браузера - повернувшись «Назад», користувач не втратить введене; паролі виключають через dontRemember('password').

Простіша альтернатива - компонент <Form action="/posts" method="post">, що працює як звичайна HTML-форма з полями за атрибутом name.

Докладніше в документації: Inertia: форми

Як працювати з формами в Inertia через useForm?

Схожі питання