Хелпер формы в Inertia

Давайте познакомимся с хелпером useForm. Он создаёт реактивный объект формы: в нём лежат начальные значения полей, признак отправки и ошибки сервера. Обычный тег form в шаблоне остаётся, но отправку перехватывают в скрипте, а поля связывают с объектом через v-model.

Метод post у объекта формы относит данные на адрес так же, как визит Inertia: документ браузера не меняется целиком. На сервере контроллер или замыкание маршрута читает запрос и возвращает человека назад методом back, экран снова рисуется внутри приложения.

Давайте опишем адрес формы и приём полей:

<?php
	use Illuminate\Http\Request;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create');
	});

	Route::post('/posts', function (Request $request) {
		return back();
	});
?>

Давайте подключим хелпер, поле заголовка и отправку:

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

	const form = useForm({
		title: '',
	})

	function submit() {
		form.post('/posts')
	}
</script>

<template>
	<form @submit.prevent="submit">
		<input
			type="text"
			v-model="form.title"
		/>
		<button type="submit">Save</button>
	</form>
</template>

Сделайте страницу Nora с формой работника: поле имени связано с хелпером, отправка не перезагружает сайт и возвращает на ту же страницу.