I want to use a toggle switch in my project. I am using Laravel 11 and Livewire 3. I followed the steps below, but the database is not updating.
I tested by placing a dd() inside the public function updating($field, $value) method, but this part of the code is not being executed at all. What is wrong with my code?
My component :
namespace App\Livewire\Backend\Services;
use Livewire\Component;
use Illuminate\Database\Eloquent\Model;
class ToggleButton extends Component
{
public Model $model;
public string $field;
public bool $hasStock;
public function mount()
{
$this->hasStock = (bool) $this->model->getAttribute($this->field);
}
public function updating($field, $value)
{
dd('hello');
$this->model->setAttribute($this->field, $value)->save();
}
public function render()
{
return view('livewire.backend.services.toggle-button');
}
}
blade:
<div>
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" value="" class="sr-only peer" wire:model="hasStock">
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
</label>
</div>
and:
<td class="hidden py-4 pl-0 pr-4 sm:table-cell">
<div class="flex gap-x-3 justify-center">
<livewire:backend.services.toggle-button
:model="$post"
field="comments_enabled"
key="{{ $post->id }}" />
</div>
</td>