Courses

Livewire 3 for Beginners with Laravel 12 Starter Kit

Category ToggleGroup and Table Filter

Summary of this lesson:
- Adding categories to task creation and editing forms.
- Syncing selected categories with task data on save.
- Displaying task categories in tasks table view.
- Implementing category filtering for task list display.

This lesson will tackle two things: choosing categories for the tasks in the form/table and filtering the tasks by category.

Create Task Form: Choose Category

First, we need to modify the Livewire component to use Categories. I will add the code for both Create and Edit forms right away.

app/Livewire/Tasks/Create.php

use App\Models\TaskCategory;
 
use App\Models\Task;
use Livewire\Component;
use Illuminate\View\View;
use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;
 
class Create extends Component
{
    // ...
 
    public function render(): View
    {
        return view('livewire.tasks.create'); 
        return view('livewire.tasks.create', [ 
            'categories' => TaskCategory::all(),
        ]);
    }
}

app/Livewire/Tasks/Edit.php:

use App\Models\TaskCategory;
 
class Edit extends Component
{
    // ...
 
    public function render(): View
    {
        return view('livewire.tasks.edit'); 
        return view('livewire.tasks.edit', [ 
            'categories' => TaskCategory::all(),
        ]);
    }
}

Next, we can show categories in both create and edit pages. The styling is from...

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

You also get:

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