Сообщение об успехе в Inertia

Давайте изучим такое понятие, как flash-сообщение. Это короткая надпись после удачного действия. Её кладут методом flash у Inertia перед редиректом на следующий экран.

На открытом списке сообщение лежит в $page.flash, а не в пропсах страницы. При следующем заходе на адрес надпись уже пропадает: она нужна только один раз после сохранения.

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

<?php
	namespace App\Models;

	use Illuminate\Database\Eloquent\Model;

	class Post extends Model
	{
		protected $fillable = [
			'title',
		];
	}
?>

Давайте опишем список, форму создания и сохранение с сообщением:

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

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'posts' => Post::orderBy('id')->get([
				'id',
				'title',
			]),
		]);
	});

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

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

		Inertia::flash('message', 'Post created.');

		return redirect('/posts');
	});
?>

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

<script setup>
	defineProps({
		posts: Array,
	})
</script>

<template>
	<p v-if="$page.flash.message">
		{{ $page.flash.message }}
	</p>
	<div
		v-for="post in posts"
		:key="post.id"
	>
		{{ post.title }}
	</div>
</template>

Давайте поставим форму на отдельный экран:

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

<template>
	<Form action="/posts" method="post">
		<input type="text" name="title" />
		<button type="submit">Save</button>
	</Form>
</template>

Сделайте добавление работника так, чтобы на списке была видна короткая надпись о создании записи, а при следующем заходе её уже не было.