Ошибка перехода в Inertia

Давайте рассмотрим ситуацию, когда заголовок поста отправили пустым, Laravel отклонил запрос, а на экране нет ни сообщения, ни подсказки, что именно не прошло проверку.

При ответе с ошибкой проверки Inertia вызывает колбэк onError. В аргументе лежит объект сообщений по именам полей, как при обычной форме Laravel. Давайте сохраним текст для заголовка в ref и покажем его под полем.

Давайте потребуем заголовок при сохранении:

<?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',
		]);

		return back();
	});
?>

Давайте сбросим старую ошибку перед отправкой и запишем новую из колбэка:

<script setup>
	import { ref } from 'vue'
	import { router } from '@inertiajs/vue3'

	const title = ref('')
	const titleError = ref('')

	function save() {
		titleError.value = ''

		router.post('/posts', {
			title: title.value,
		}, {
			onError(errors) {
				titleError.value = errors.title
			},
		})
	}
</script>

<template>
	<h1>New post</h1>
	<input v-model="title" type="text">
	<div v-if="titleError">
		{{ titleError }}
	</div>
	<button type="button" @click="save">
		Save
	</button>
</template>

Покажите сообщение проверки под полем имени работника Ivan, если отправка прошла с пустым значением.