Livewire wire:click not working when displayed conditionally in the loop

#1

What seems to be the problem:

Livewire wire:click not working when displayed conditionally in the loop

Steps to Reproduce:

display wire:click conditionally in the loop then double click once it displays again.

Are you using the latest version of Livewire:

Laravel v8.14.0
Livewire v2.3.1

Do you have any screenshots or code examples:

<div class="h-12 flex px-6">
    @foreach($this->filters as $key => $value)
        @if ($this->selectedFilter == $key)
            <div class="px-4 py-3 items-center block border-b-4 border-green-600">
                {{ $key }}
            </div>
        @else
            <div class="px-4 py-3 items-center block cursor-pointer border-b-4 border-transparent hover:text-gray-500 hover:border-gray-400"
                 wire:click="changeFilter('{{ $key }}')"
            >
                {{ $key }}
            </div>
        @endif
    @endforeach
</div>

in the second click nothing happens, no errors. Is this expected behaviour? or I am doing something wrong?

i will be appreciated for your help.

#2

I have achieved this by changing like below;

<div>
        @foreach($this->filters as $key => $value)
            @if ($this->selectedFilter == $key)
                <button class="px-4 py-3 items-center block border-b-4 border-green-600" wire:click="changeFilter('{{ $key }}')" disabled>
                    {{ $key }}
                </button>
            @else
                <button class="px-4 py-3 items-center block cursor-pointer border-b-4 border-transparent hover:text-gray-500 hover:border-gray-400"
                     wire:click="changeFilter('{{ $key }}')">
                    {{ $key }}
                </button>
            @endif
        @endforeach
</div>
1 Like
#3

Can you provide the component code?