wire:confirm | Confirmation Dialog in Laravel Livewire 3 | EP 17
In this post, I will show you how to open the confirmation dialog box using wire:confirm with laravel livewire 3.
In this example, we will show a list of users with a delete button. When a user clicks the delete button, a confirmation prompt will appear before deleting the user using the `wire:confirm` directive. Let's go through the example step by step.
Step 1: Create Users Component
Now here we will create a Livewire component using their command. So run the following command to create an add more component.
php artisan make:livewire Users
Now they created files on both paths:
app/Livewire/Users.php
resources/views/livewire/users.blade.php
Now, both files we will update as below for our contact us form.
app/Livewire/Users.php
<?php
namespace App\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;
class Users extends Component
{
use WithPagination;
protected $paginationTheme = "bootstrap";
public function render()
{
return view('livewire.users', [
"users" => User::paginate(8)
]);
}
public function delete($id)
{
User::find($id)->delete();
}
}
resources/views/livewire/users.blade.php
<div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>
<button
wire:click="delete({{ $user->id }})"
wire:confirm="Are you sure want to remove this user?"
class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $users->links() }}
</div>
Step 2: Use Livewire Component
now, we will user counter component in home page. so you need to update home.blade.php file as the following way:
resources/views/home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Users') }}</div>
<div class="card-body">
<livewire:users />
</div>
</div>
</div>
</div>
</div>
@endsection
Run Laravel:
All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:
php artisan serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:8000/
Let's see the video:
I hope it can help you...