You probably have noticed that we have "Active" toggle in the table. Let's implement its behavior, so you could click on that Toggle to change the value immediately, without leaving the table page.
This is the expected result, visually:
You might have seen that in Categories migration we have a column is_active, so we will change its value in the database.
First, we need a public property in the Livewire Component. It will be an array and called $active...
Why are we creating an in-memory dictionary (an associative array with same structure for all key-value pairs) to hold the value from each category's is_active property?
Couldn't we just bind the toggling to the is_active of the current iterated $category inside the loop?
I did that and got the same result, with more performance and readability: the active array does not need to be recreated on every update in $categories; the toggleIsActive receives as argument the $category itself rather than its id (thus no need to fetch it in the database: we just update it directly).
e.g:
public function activeToggle(Category $category){ $category->update(['is_active' => !$category->is_active]);}<input type="checkbox" id="is-active-{{ $category->id }}" wire:key="is-active-{{ $category->id }}" wire:click="activeToggle({{ $category }})" wire:loading.attr="disabled" {{ $category->is_active ? 'checked' : '' }} class="sr-only peer"/>
How can we apply a newer @checked blade directive?
I don't think we can apply it here.