Prerequisites
- Fresh or Existing Laravel Project
- Install Livewire
- Include the JavaScript And Styles (on every page that will be using Livewire).
Suggestion layouts/app.blade.php
...
@livewireStyles
...
@livewireScripts
Step 1 - Create Livewire Component
php artisan make:livewire categories-select
#App/Http/Livewire/CategoriesSelect.php
<?php
namespace App\Http\Livewire;
use App\Models\Category;
use App\Models\SubCategory;
use App\Models\SubSubCategory;
use Livewire\Component;
class CategoriesSelect extends Component
{
public $categories;
public $subcategories;
public $subsubcategories;
public $selectedCategory;
public $selectedSubCategory;
public $selectedSubSubCategory;
public function updatedSelectedCategory($value)
{
$this->subcategories = SubCategory::where("category_id", $value)->get();
}
public function updatedSelectedSubCategory($value)
{
$this->subsubcategories = SubSubCategory::where("sub_category_id", $value)->get();
}
public function mount()
{
if ($this->selectedCategory) {
$this->subcategories = SubCategory::where("category_id", $this->selectedCategory)->get();
}
if ($this->selectedSubCategory) {
$this->subsubcategories = SubSubCategory::where("sub_category_id", $this->selectedSubCategory)->get();
}
}
public function render()
{
$this->categories = Category::all();
return view('livewire.categories-select');
}
}
Step 2 - Edit Livewire View
Now Edit filename categories-select.blade.php
in /views/Livewire
<div class="row">
<div class="col-md-4 col-12">
<div class="mb-1">
<label class="form-label" for="title">select category {{ $selectedCategory }}</label>
<select class="form-control" name="category_id" wire:model='selectedCategory'>
<option value="" selected>none</option>
@foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->title }}</option>
@endforeach
</select>
@error('category_id')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</div>
<div class="col-md-4 col-12">
<div class="mb-1">
<label class="form-label" for="title">select sub category {{ $selectedSubCategory }}</label>
<select name="sub_category_id" id="" class="form-control" wire:model='selectedSubCategory'>
<option value="" selected>none</option>
@if ($subcategories)
@foreach ($subcategories as $category)
<option value="{{ $category->id }}">{{ $category->title }}</option>
@endforeach
@endif
</select>
@error('sub_category_id')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</div>
<div class="col-md-4 col-12">
<div class="mb-1">
<label class="form-label" for="title">select sub sub category {{ $selectedSubSubCategory }}</label>
<select name="sub_sub_category_id" id="" class="form-control" wire:model='selectedSubSubCategory'>
<option value="" selected>none</option>
@if ($subsubcategories)
@foreach ($subsubcategories as $category)
<option value="{{ $category->id }}">{{ $category->title }}</option>
@endforeach
@endif
</select>
@error('sub_sub_category_id')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
</div>
</div>
Use livewire component in blade
@livewire('categories-select')
//OR
@livewire('categories-select',[
'selectedCategory' =>$product->category_id,
'selectedSubCategory' =>$product->sub_category_id,
'selectedSubSubCategory' => $product->sub_sub_category_id
])
Conclusion
In this tutorial, we will create a Livewire Multi-level Category Select List with dependent data such as country, state, and city.
Credit: livewire