How do I uncheck checkbox in Laravel livewire for the changes to reflect in the database? - laravel

Question

Please I need assistance solving this problem, I am using laravel Spatie roles and permission, I want to add permissions to the role using checkboxes, so far adding permission to roles is working fine, but when editing roles if I unchecked permission for a role it doesn't reflect the changes in the database,any help will be appreciated
This is view
<!-- Modal -->
<div class="modal " id="roleModal" tabindex="-1" aria-labelledby="roleModalLabel" aria-
hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="roleModalLabel">Role</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST">
#csrf
<div class="col-span-6 sm:col-span-4">
<x-jet-label for="role" value="{{ __('Role') }}" />
<x-jet-input id="role" type="text" class="mt-1 block w-full"
wire:model.defer="roleName" />
<x-jet-input-error for="role" class="mt-2" />
</div>
<div class="block">
<strong>Permission:</strong>
<br/>
#foreach($permissions as $key => $permission)
<x-jet-label value="{{ $permission->name }}" />
<x-jet-checkbox id="permission" value="{{$permission->id}}"
type="checkbox" class="mt-1 block " wire:model.defer="permissionId" />
<br/>
#endforeach
</div>
{{-- {{dd($permission->id)}} --}}
</form>
</div>
<div class="modal-footer">
<button type="button" class="bg-red-500 text-white active:bg-indigo-600 px-3 py-2
rounded outline-none focus:outline-none" wire:click="closeModal">Close</button>
#if ($editMode)
<button type="button" class="bg-indigo-500 text-white active:bg-indigo-600 px-3
py-2 rounded outline-none focus:outline-none" wire:click="updateRole">Save
changes</button>
#else
<button type="button" class="btn btn-primary" wire:click="storeRole">Create
Role</button>
#endif
</div>
</div>
This is the role livewire component
class Roles extends Component
{
public $editMode = false;
public $roleId;
public $roleName;
public $permissionId = [];
public function showEditModal($id)
{
$this->reset();
$this->editMode = true;
$this->roleId = $id;
$this->loadRole();
$this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'show']);
}
public function loadRole()
{
$role = Role::find($this->roleId);
$this->roleName = $role->name;
$this->permissionId = $role->permissions->pluck('id');
}
public function updateRole()
{
$role = Role::find($this->roleId);
$role->update(['name' => $this->roleName ]);
$role->syncPermissions($this->permissionId);
$this->reset();
$this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'hide' ]);
session()->flash('message', 'Role Updated Successfully');
}
public function deleteRole($id)
{
$role = Role::find($id);
$role->delete();
session()->flash('message', 'Role Deleted Successfully');
}
public function closeModal()
{
$this->reset();
$this->dispatchBrowserEvent('modal', ['modalId' => '#roleModal', 'actionModal' => 'hide' ]);
}
public function render()
{
$roles = Role::orderBy('id','DESC')->paginate(5);
$permissions = Permission::get();
return view('livewire.roles', ['roles' => $roles, 'permissions' => $permissions ]);
}
}

Answer 1

you can check this answer Retrive ids and check related boxes
#foreach($permissions as $key => $permission)
<x-jet-label value="{{ $permission->name }}" />
<x-jet-checkbox id="permission" value="{{$permission->id}}"
type="checkbox" class="mt-1 block " wire:model.defer="permissionId.{{ $permission->id }}" #if(in_array($permission->id,$permissionId)) checked #endif />
<br/>
#endforeach