livewire checkboxes array with pluck

Hello,

I have some checkboxen that i want to check in an array like [1,3,4,2]

but when i uncheck a box ik get an diferent array back like [1,3,4,"1:1",4:4"]

etc please help

livewire component:

<?php

namespace LB\Cms\Livewire\Profile;

use Livewire\Component;
use Illuminate\Support\Arr;

use App\Models\Role;

class Roles extends Component
{

	public $user;
	public $selectedRoles = [];
	public $selectedAll = FALSE;
	public $bulkDisabled = TRUE;
	public $roles;

	public function mount() {
		//
		$this->selectedRoles = $this->user->roles->pluck('id');
	}

	public function save() {

		$newRoles = $this->selectedRoles;
		$this->user->syncRoles(explode(',', $newRoles));
		$this->selectedRoles = $this->user->roles->pluck('id');
	}

	public function updatedSelectedAll($value) {
		if($value) {
			$this->selectedRoles = Role::pluck('id');
		} else {
			$this->selectedRoles = [];
		}
	}

	public function deleteSelected() {
		$this->selectedRoles = [];
		$this->selectAll = FALSE;
	}

    public function render()
    {
    	$this->bulkDisabled = count($this->selectedRoles) < 1;

        return view('base::livewire.settings.profile.roles');
    }
}

blade component:



<div class="card bd-primary mg-t-20">
  <div class="card-header bg-primary tx-white">
    @lang('base_lang::gui.roles')
  </div><!-- card-header -->
  <div class="list-group list-group-flush list-group-skills">
  	<input type="hidden" wire:model="selectedRoles" name="roles" />
    <button wire:click.prevent="deleteSelected" onclick="confirm('Are you sure') || event.stopImmediatePropagation()" class="@if($bulkDisabled) disabled @endif btn btn-sm btn-outline-danger">Wis Alle Roles</button>
  	@if ($user->roles->count() == 0)
  		<div class="list-group-item"><span>@lang('base_lang::gui.this_user_has_not_been_assigned_any_roles_yet')</span></div>
  	@endif
    <div class="list-group-item">
      <input type="checkbox" wire:model="selectedAll" class="form-checkbox" name="selectedAll">
    </div>
  	<div>
      	@foreach ($roles as $role)
            <div class="list-group-item">
            	<input type="checkbox" wire:model="selectedRoles" class="form-checkbox" name="role.{{$role->name}}" value="{{$role->id}}">
              		<span>{{$role->display_name}} ({{$role->description}})</span>
            </div><!-- list-group-item -->
        @endforeach
    </div>
  </div><!-- list-group -->
  <button class="btn btn-sm btn-outline-success" wire:click.prevent="save()">Save</button>
</div><!-- card -->

<div class="card bd-primary mg-t-20">
  <div class="card-header bg-primary tx-white">
    @lang('base_lang::gui.roles') vue
  </div><!-- card-header -->
  <div class="list-group list-group-flush list-group-skills">
    <input type="hidden" name="roles" :value="rolesSelected" />
    @if ($user->roles->count() == 0)
            <div class="list-group-item"><span>@lang('base_lang::gui.this_user_has_not_been_assigned_any_roles_yet')</span></div>
    @endif
    <b-form-group>
            @foreach ($roles as $role)
                    <div class="list-group-item">
                            <b-form-checkbox v-model="rolesSelected" value="{{$role->id}}">
                                    <span>{{$role->display_name}} ({{$role->description}})</span>
                            </b-form-checkbox>
                    </div><!-- list-group-item -->
                @endforeach
            </b-form-group>
  </div><!-- list-group -->
</div><!-- card -->

MarianoMoreyra

5 years ago

Best Answer

Level 25

Hi @alexteie

The thing with livewire is that when you have an array of checkboxes, they are sent like an associative array with the Model ID as the Key and true or false as the value, depending on the state of each checkbox.

So you'll receive something like this if you do a dd($this->selectedRoles) at the beginning of you save() method:

array:4 [▼
  1 => false
  2 => true
  3 => false
  4 => true
]

So, in order to make this work, at the mount() method, you need to form the array the same as it will be sent by livewire. In my case this is what it worked:

	public function mount() {
		// 
		$this->selectedRoles = array_fill_keys($this->user->roles->pluck('id')->toArray(), true);
	}

this will make the IDs the key of the array and fill the values with a true.

Then, at the moment of saving, since you need a simple array again, you have to go the other way around with something like this:

$this->user->syncRoles(array_keys(array_filter($this->selectedRoles)));

Finally, at the view you only need to wire the model like this (no name or value attributes needed):

      	@foreach ($roles as $role)
            <div class="list-group-item">
            	<input type="checkbox" wire:model="selectedRoles.{{$role->id}}" class="form-checkbox">
              		<span>{{$role->display_name}} ({{$role->description}})</span>
            </div><!-- list-group-item -->
        @endforeach

Hope this works for you too!!

7 likes

alexteie

5 years ago

Level 5

Thx this is what i was looking for ;) this is working great

1 like

MarianoMoreyra

5 years ago

Level 25

You're welcome @alexteie !

I'm glad it worked for you too!

Please or to participate in this conversation.