Livewire Skipping Array inputs

when we click input quick it start skipping check.

I don't understand this.

Can you please elaborate exactly the difference from what you expect and what you see happening and how we can reproduce that with your playground example?

edit I think I see what you mean, if you click fast over the checkboxes from top to bottom for example the end result is not always 1, 2, 3 and 4 are being checked. In my case I ended up with 1 and 4 only being checked. Odd, I don't have a quick fix. Will try a few things for you

It's possible that the modifications for the checkboxes in your case were completed out of order because you quickly clicked on several of them. The $items array as a result didn't reflect the desired condition for some checkboxes because they were skipped. I solved this by using wire:click and created a toggleItem() method to update checkbox properly.

In LivewireComponent.

class LivewireComponent extends Component
{
    public $items = [];

    public function render()
    {
       return view('livewire-component');
    }

    public function toggleItem($value)
    {
        if (in_array($value, $this->items)) {
            $this->items = array_diff($this->items, [$value]);
        } else {
            $this->items[] = $value;
        }
    }
}

Do like this in your blade.

<div>
    @for ($i = 1; $i < 15; $i++)
       <div>
            <input type="checkbox" wire:key="checkbox{{$i}}" wire:click="toggleItem({{$i}})" {{ in_array($i, $items) ? 'checked' : '' }} />item {{$i}}
        </div>        
    @endfor

    @foreach ($items as $item)
        <div>{{$item}}</div>
    @endforeach
</div>