Удаление записи в Inertia

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

У Link задают метод delete. Такая ссылка отправляет действие, а не запрос страницы. Маршрут удаляет строку из таблицы и возвращает человека на список.

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

<?php
	use App\Models\Post;
	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::delete('/posts/{post}', function (Post $post) {
		$post->delete();

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

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

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

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

<template>
	<div
		v-for="post in posts"
		:key="post.id"
	>
		{{ post.title }}
		<Link
			:href="'/posts/' + post.id"
			method="delete"
		>
			Delete
		</Link>
	</div>
</template>

Сделайте удаление работника из списка так, чтобы строка пропадала без открытия её адреса как страницы.