Courses

Vue Laravel 12 Starter Kit: CRUD Project

Category ToggleGroup and Tasks Filter

Summary of this lesson:
- Adding categories to task creation and editing forms
- Using Shadcn Vue Toggle Group component for category selection
- Displaying categories in the task list table
- Implementing category filtering for the task list

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 Controller to use Categories. I will add the code for both Create and Edit forms right away.

app/Http/Controllers/TaskController.php

use App\Models\TaskCategory;
 
// ...
 
public function create()
{
return Inertia::render('Tasks/Create');
return Inertia::render('Tasks/Create', [
'categories' => TaskCategory::all(),
]);
}
 
// ...
 
public function edit(Task $task)
{
$task->load(['media']);
$task->load(['media', 'taskCategories']);
$task->append('mediaFile');
 
return Inertia::render('Tasks/Edit', [
'task' => $task,
'categories' => TaskCategory::all(),
]);
}
// ...

Next, we need to add task_categories to the...

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

You also get:

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