The issue is on the context of a form to edit a role attributes including associated permissions that get selected through checkboxes.
After the form is loaded, some permissions’ checkboxes appear selected as expected based on the retrieved role’s data. Empty checkboxes can be selected and deselected, and changes get reflected on the browser’s request payload preview array, although new values added appears as strings on the array, as you can see:
role_permissions: [1, 2, 3, 4, 5, "6"].
However, and this is the issue, when deselecting checkboxes that were selected by default when the form was loaded, they behave weirdly not allowing deselect more than one, and the array on browser’s request payload preview doesn’t get updated at all.
Laravel view:
<div class="card-body">
<livewire:roles.form-edit :role="$role" />
</div>
Livewire controller:
class FormEdit extends Component
{
public $role;
public $name;
public $permissions;
public $role_permissions;
public $notes;
public function mount($role)
{
$this->role = $role;
$this->name = $role->name;
$this->permissions = Permission::all();
$this->role_permissions = $role->permissions()->pluck('id')->toArray();
$this->notes = $role->notes;
}
public function update()
{
$role_data = $this->validate([
'name' => ['required', 'string', 'min:1', 'max:255', Rule::unique('roles')->ignore($this->role->id)],
'permissions' => 'nullable',
'notes' => 'nullable',
]);
$this->role->update([
'name' => $role_data['name'],
'notes' => $role_data['notes'],
]);
$this->role->permissions()->sync($this->role_permissions);
session()->flash('success_message', "Rol actualizado correctamente.");
return redirect()->route('backend.roles.role.index');
}
public function render()
{
return view('livewire.roles.form-edit');
}
}
Livewire view:
<form wire:submit.prevent="update" accept-charset="UTF-8" id="edit_role_form" class="form-horizontal">
<x-input.text label="Name" attribute="name" />
<x-input.checkboxes label="Permissions" attribute="role_permissions" :options="$permissions" :entity-options="$role_permissions" />
<x-input.textarea label="Notes" attribute="notes" />
<x-input.submit label="Save" />
</form>
<x-input.checkboxes /> Laravel component view:
@props([
'label',
'attribute',
'options',
'entityOptions'
])
<div class="form-group row">
<label for="{{ $attribute }}" class="col-md-3 control-label">{{ __($label) }}</label>
<div class="col-md-9">
<ul class="list-unstyled row checkboxes-list">
<?php $counter = 0 ?>
@foreach($options as $option)
@if($counter == 0)
<div class="col-lg-4 checkboxes-list-bottom-divider">
@elseif($counter != 0 && $counter % 5 == 0)
</div>
<div class="col-lg-4 checkboxes-list-bottom-divider">
@endif
<li>
<label>
<input wire:model="{{ $attribute }}" {{ $attributes }} type="checkbox" value="{{ $option->id }}" placeholder="" {{ (in_array($option->id, $entityOptions)) ? 'checked' : '' }}> {{ $option->label }}
</label>
</li>
<?php $counter++ ?>
@endforeach
</div>
</ul>
</div>
</div>
Laravel version: ^7.0
Livewire version: ^1.3
Update: I just get rid of the <x-input.checkboxes /> Laravel component view and refactored all the related code inside the Livewire view, but it doesn’t work either. Same behavior. I’m stuck at this point with Livewire.
Solved. I’m still in love with Livewire. I don’t really want to learn a Javascript framework.