Добавление записи в Inertia

Представим, что новую запись некуда внести: список только показывает то, что уже лежит в таблице. Человек не может добавить заголовок, не уходя с экрана.

Форма на том же экране отправляет заголовок на сервер. Модель Post пишет новую строку, а контроллер возвращает человека на ту же страницу методом back. Список уже содержит свежую запись вместе со старыми.

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

<?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::post('/posts', function (Request $request) {
		Post::create([
			'title' => $request->string('title'),
		]);

		return back();
	});
?>

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

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

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

<template>
	<div
		v-for="post in posts"
		:key="post.id"
	>
		{{ post.title }}
	</div>
	<Form action="/posts" method="post">
		<input type="text" name="title" />
		<button type="submit">Save</button>
	</Form>
</template>

Сделайте добавление работника с экрана списка так, чтобы его имя сразу было видно в списке.