CRUD: Delete Task

Text Version of the Lesson

In this lesson, let's add the Delete button to our table.

Delete Button

In the Livewire component we need a method which will be called when the delete button will be clicked. In this method we will accept tasks ID as a parameter.

app/Livewire/Tasks/Index.php:

class Index extends Component
{
    use WithPagination;
 
    public function delete(int $id): void 
    {
        Task::where('id', $id)->delete();
 
        session()->flash('success', 'Task successfully deleted.');
    } 
 
    public function render(): View
    {
        return view('livewire.tasks.index', [
            'tasks' => Task::paginate(3),
        ]);
    }
}

Besides using the wire:click Blade directive to call the delete() method, we will use the wire:confirm Blade directive to require the user to confirm the deletion first.

resources/views/livewire/tasks/index.blade.php

BEFORE:

<flux:button  variant="danger" type="button">{{ __('Delete') }}</flux:button>

AFTER:

<flux:button wire:confirm="Are you sure?" wire:click="delete({{ $task->id }})" variant="danger" type="button">{{ __('Delete') }}</flux:button>

Notice: In this course, we're adding custom Tailwind CSS classes to various components. I don't explicitly emphasize this, but it's pretty important: you must be good with Tailwind to customize the design to your needs.

If we click that Delete button, it will...