Courses

Vue Inertia + Laravel 11: From Scratch

Delete Record with Confirmation

Summary of this lesson:
- Implementing record deletion
- Adding confirmation dialogs
- Managing delete operations in SPA
- Handling success messages after deletion

Another common feature is deleting a record with a confirmation message.


First, let's take care of the back-end part.

app/Http/Controllers/PostController.php:

class PostController extends Controller
{
// ...
 
public function destroy(Post $post)
{
$post->delete();
 
return redirect()->route('posts.index')
->with('message', 'Post deleted successfully');
}
}

For the front-end, first, let's add the button.

resources/js/Pages/Posts/Index.vue:

// ...
 
<template>
<Head title="Posts" />
 
<AppLayout>
<Link :href="route('posts.create')" class="mb-4 inline-block rounded-md bg-blue-500 px-4 py-3 text-xs font-semibold uppercase tracking-widest text-white shadow-sm">
Add new post
</Link>
 
<table class="min-w-full border divide-y divide-gray-200">
<thead>
<tr>
<th class="bg-gray-50 px-6 py-3 text-left">
<span class="text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">ID</span>
</th>
<th class="bg-gray-50 px-6 py-3 text-left">
<span class="text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">Title</span>
</th>
<th class="bg-gray-50 px-6 py-3 text-left">
<span class="text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">Content</span>
</th>
<th class="bg-gray-50 px-6 py-3 text-left">
<span class="text-xs font-medium uppercase leading-4 tracking-wider text-gray-500">Created At</span>
</th>
<th class="bg-gray-50 px-6 py-3 text-left"></th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 divide-solid">
<tr v-for="post in posts.data">
<td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap">
{{ post.id }}
</td>
<td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap">
{{ post.title }}
</td>
<td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap">
{{ post.content }}
</td>
<td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap">
{{ post.created_at }}
</td>
<td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap">
<button type="button" class="rounded-md bg-red-600 px-3 py-2 text-xs font-semibold uppercase tracking-widest text-white shadow-sm">
Delete
</button>
</td>
</tr>
</tbody>
</table>
</AppLayout>
</template>

The delete button will have a click event. When the button is clicked, we can...

The full lesson is only for Premium Members.
Want to access all 18 lessons of this course? (56 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord