Завершение перехода в Inertia

Допустим, пока заголовок поста уходит на сервер, кнопка сохранения должна быть недоступна, а рядом виден короткий текст ожидания. Если гасить индикатор только при успехе, после ошибки проверки экран останется в состоянии «запрос ещё идёт».

Колбэк onFinish вызывается, когда визит полностью завершился: и после успешного ответа, и после ошибки проверки. Давайте включим флаг ожидания перед методом post и сбросим его в onFinish в любом исходе.

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

<?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 waiting = ref(false)

	function save() {
		waiting.value = true

		router.post('/posts', {
			title: title.value,
		}, {
			onFinish: () => {
				waiting.value = false
			},
		})
	}
</script>

<template>
	<h1>New post</h1>
	<input v-model="title" type="text">
	<button
		type="button"
		:disabled="waiting"
		@click="save"
	>
		Save
	</button>
	<div v-if="waiting">
		Saving…
	</div>
</template>

Блокируйте кнопку сохранения работника Nina на время запроса и снова открывайте её, когда визит закончился, в том числе после ошибки проверки.