Ошибка поля в Inertia

Допустим, пустой заголовок уходит на сервер, а на экране не видно, что именно не так. Форма снова на месте, но человек не понимает, какое поле нужно исправить.

Проверку делает метод validate запроса. Сообщение поля лежит в слоте компонента, в объекте errors, по имени поля. Его выводят рядом с этим полем.

Давайте опишем приём полей с проверкой заголовка:

<?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) {
		$request->validate([
			'title' => 'required|string|max:20',
		]);

		return back();
	});
?>

Давайте выведем текст ошибки под полем заголовка:

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

<template>
	<Form action="/posts" method="post" #default="{ errors }">
		<input type="text" name="title" />
		<div v-if="errors.title">
			{{ errors.title }}
		</div>
		<button type="submit">Save</button>
	</Form>
</template>

Сделайте форму работника так, чтобы при пустом имени под полем было видно сообщение сервера.