Only until March 18th: coupon LARAVEL12 for 40% off Yearly/Lifetime membership!

Read more here
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:

  • 71 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord