Сохранение ошибок при перезагрузке в Inertia

Пусть форма создания поста вернула ошибки проверки, и человек видит их над полями. Рядом есть кнопка, которая частично обновляет список черновиков на той же странице. Ответ без новой проверки несёт пустой объект errors, и клиент затирает старые сообщения, хотя поля формы ещё не исправлены.

Опция preserveErrors при визите говорит Inertia не заменять ошибки, если сервер не прислал новые. Её передают вместе с reload и списком only для нужных пропсов.

Давайте опишем страницу с проверкой и списком черновиков:

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

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create', [
			'drafts' => fn () => ['Old note'],
		]);
	});

	Route::post('/posts', function (Request $request) {
		$request->validate([
			'title' => 'required|string',
		]);

		return back();
	});
?>

Давайте выведем ошибки, форму и кнопку частичного обновления списка:

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

	defineProps({
		drafts: Array,
	})

	function refreshDrafts() {
		router.reload({
			only: ['drafts'],
			preserveErrors: true,
		})
	}
</script>

<template>
	<Form
		action="/posts"
		method="post"
		#default="{ errors, hasErrors }"
	>
		<ul v-if="hasErrors">
			<li
				v-for="(message, field) in errors"
				:key="field"
			>
				{{ message }}
			</li>
		</ul>
		<input type="text" name="title" />
		<button type="submit">Save</button>
	</Form>
	<button type="button" @click="refreshDrafts">
		Refresh drafts
	</button>
	<ul>
		<li v-for="draft in drafts" :key="draft">
			{{ draft }}
		</li>
	</ul>
</template>

Сделайте форму работника Pavel с ошибками по полю name и кнопкой обновления пропса teams, чтобы сообщения проверки не исчезали после ответа.