Checkboxes in a table

[brouwersron]

I have a table that loops over some items, and I want to have some checkboxes to perform some bulk actions:

@foreach($items as $item)
<flux:row>
    <flux:cell>
        <flux:checkbox wire:model="selectedItems" value="{{ $item->id }}"/>
    </flux:cell>
</flux:row>
@endforeach

The above does not work, the below however, does work:

@foreach($items as $item)
<flux:row>
    <flux:cell>
        <input type="checkbox" wire:model="selectedItems" value="{{ $item->id }}"/>
    </flux:cell>
</flux:row>
@endforeach

I have a button somewhere:

<flux:button wire:click="bulk">Bulk actions</flux:button>

And in my component:

    public $selectedItems = [];

    public function bulk()
    {
        dd($this->selectedItems); // With the flux checkboxes this shows "true" instead of an array of selected id's
    }

Why doesn't this work with Flux checkboxes? Am I missing something? I cannot put these checkboxes inside a <flux:checkbox.group>

[schonhoff]

Hi,

I have the same issue. Tried out the screencast from Livewire with Flux and didn't work. I couldn't find out, why it won't work.

I added a temporary component with the Flux classes:

@php
    $classes = Flux\Flux::classes()
        ->add('size-[1.125rem] rounded-[.3rem] mt-px')
        ->add('text-sm text-zinc-700 dark:text-zinc-800')
        ->add('shadow-sm [&[disabled]]:shadow-none data-[checked]:shadow-none data-[indeterminate]:shadow-none')
        ->add('flex justify-center items-center [&[data-checked]:not([data-indeterminate])>svg:first-child]:block [&[data-indeterminate]>svg:last-child]:block')
        ->add([
            'border',
            'border-zinc-300 dark:border-white/10',
            '[&[disabled]]:border-zinc-200  dark:[&[disabled]]:border-white/5',
            'data-[checked]:border-transparent data-[indeterminate]:border-transparent',
            '[&[disabled]]:data-[checked]:border-transparent data-[indeterminate]:border-transparent',
        ])
        ->add([
            'bg-white dark:bg-white/10',
            'dark:[&[disabled]]:bg-white/5',
            'data-[checked]:bg-zinc-800 dark:data-[checked]:bg-white',
            '[&[disabled]]:data-[checked]:bg-zinc-500 dark:[&[disabled]]:data-[checked]:bg-white/60',
            'data-[checked]:hover:bg-zinc-800 dark:data-[checked]:hover:bg-white',
            'data-[checked]:focus:bg-zinc-800 dark:data-[checked]:focus:bg-white',
            'data-[indeterminate]:bg-zinc-800 dark:data-[indeterminate]:bg-white',
            'data-[indeterminate]:hover:bg-zinc-800 dark:data-[indeterminate]:hover:bg-white',
            'data-[indeterminate]:focus:bg-zinc-800 dark:data-[indeterminate]:focus:bg-white',
        ])
        ->add('disabled:opacity-50')
        ;
@endphp
<input type="checkbox" {{ $attributes->class($classes) }} {{ $attributes->except('class') }} />

Caleb said in his Livestreams it would be nice, if we can provide copyable code. So here it should be:

use Livewire\Volt\Component;
use Livewire\Attributes\Layout;

new
#[Layout('layouts.guest')]
class extends Component {
    public array $items = [
        'foo',
        'bar',
        'baz'
    ];
    public $selectedItems = [];

    public function bulk(): void
    {
        dd($this->selectedItems); // With the flux checkboxes this shows "true" instead of an array of selected id's
    }
}; ?>

<div>
    @foreach($items as $item)
        <flux:row :wire:key="$item">
            <flux:cell>
                <flux:checkbox wire:model="selectedItems" value="{{ $item }}"/>
            </flux:cell>
        </flux:row>
    @endforeach
    <flux:button wire:click="bulk">Bulk actions</flux:button>
</div>

The problem should be that the flux:checkbox can't handle the wire:model array syntax of checkboxes. It only handles it with <flux:checkbox.group wire:model="selectedItems"> but that isn't possible to use for tables I would guess.
This works but isn't an option if you have other wire:models in it I would guess:

use Livewire\Volt\Component;
use Livewire\Attributes\Layout;

new
#[Layout('layouts.guest')]
class extends Component {
    public array $items = [
        'foo',
        'bar',
        'baz'
    ];
    public $selectedItems = [];

    public function bulk(): void
    {
        dd($this->selectedItems); // With the flux checkboxes this shows "true" instead of an array of selected id's
    }
}; ?>

<div>
    <flux:checkbox.group wire:model="selectedItems">
        @foreach($items as $item)
            <flux:row :wire:key="$item">
                <flux:cell>
                    <flux:checkbox value="{{ $item }}"/>
                </flux:cell>
            </flux:row>
        @endforeach
    </flux:checkbox.group>
    <flux:button wire:click="bulk">Bulk actions</flux:button>
</div>

[pkeogan]

@brouwersron @schonhoff here is a better workaround for that issue.

use Livewire\Volt\Component;
use Livewire\Attributes\Layout;

new
#[Layout('layouts.guest')]
class extends Component {
public array $items = [
'foo',
'bar',
'baz'
];
public $selectedItems = [];

public function bulk(): void
{
dd($this->selectedItems); // With the flux checkboxes this shows "true" instead of an array of selected id's
}
}; ?>

<div>
    @foreach($items as $item)
        <flux:row :wire:key="$item">
            <flux:cell>
                <ui-checkbox-group wire:model.live="selectedItems"  data-flux-checkbox-group>
                    <flux:checkbox value="{{ $item }}"/>
                </ui-checkbox-group>
            </flux:cell>
        </flux:row>
    @endforeach
</div>

You just need wrap your checkboxes with this

    <ui-checkbox-group wire:model.live="selectedItems"  data-flux-checkbox-group>
        //place check boxes here
    </ui-checkbox-group>

[schonhoff]

Thanks for the workaround. I hope Flux will be able to give us a better solution without using the ui-checkbox-group Tag outside of a Flux component.

[calebporzio]

Thanks for the report. The fix will be in the next release (and you will have to upgrade to Livewire v3.5.12 as well)