CODEWITHSUNDEEP
laravellaravel-8laravel-livewirealpine.js
OurBG
OurBG

Reputation: 597

Weird bug with AlpingJS and Livewire

I have the following simple table with Livewire:

@foreach ($sms_lists as $sms_list)
    <x-table.row>
        @if($listForEdit && $listForEdit['id'] == $sms_list->id)
        <x-table.cell>
            <span wire:click="firstAction">FIRST</span>
            <span wire:click="secondAction">SECOND</span>
        </x-table.cell>
        @else
        <x-table.cell>
            <span wire:click="thirdAction">THIRD</span>
            <span wire:click="fourthAction">FOURTH</span>
        </x-table.cell>
        @endif
    </x-table.row>
@endforeach

NOTE: For the problem described below I have tested in this environment mostly with button, but also with a and div. I have made it span just for clarity.

The SECOND item always performs fourthAction. If I comment out the FOURTH item, SECOND starts working.

If I change to the fourth item just to <span></span> or ANY element - SECOND stops working.

It works only if the @else has only one span. I see the icon and text of SECOND but somehow all attributes are from FOURTH... including all events and onclicks etc.

PS: Adding an ID to the FOURTH makes it stay persistently and never hide, even if it's whole block is hidden in the @else, it just stays between the FIRST and SECOND...

Upvotes: 0

Views: 454

Answers (1)

Santanu
Santanu

Reputation: 11

You've to add wire:key="$loop->index" to the row for livewire to identify the rows.

Upvotes: 1

Related Questions