Livewire: btn group radio. After first click, there's no more requests.

Hi! I have a btn group from bootstrap and I'm trying to use them to fire a method in the component. After I load the page, it works fine, but, when I try to click in another button, nothing happens, not even a single request or error.

Debugging using dd, i figured that it stop working after render method is called.

Someway the render method is screwing my buttons and then the functions don't work.

Btw, I've experienced this problem in other cases.

This is my code:

    <label class="btn btn-outline-primary" for="btnradio0000">Todos</label>
    @foreach ($componentBlueprints as $componentBlueprint)
        <input type="radio" class="btn-check" name="btnradio" id="btnradio{{ $componentBlueprint->id }}"
            autocomplete="off" wire:click="filter('{{ $componentBlueprint->id }}')" wire:key="{{ $componentBlueprint->id }}">

        <label class="btn btn-outline-primary"
            for="btnradio{{ $componentBlueprint->id }}">{{ $componentBlueprint->label }}</label>
    @endforeach

</div>

i give up. For some reason the starting div and the input is not being show.

jaseofspades88

2 years ago

Level 51

Try wrapping each of the blueprints in the loop to which you apply the wire:key as I don't think it knows the difference between the input and the label.

I would advise you wrap the input with the label so you get the native click effect. Something like this...

@foreach($componentBlueprints as $componentBlueprint
		<label wire:key="{{ $componentBlueprint->id }}">
				<input
						type="radio" 
						class="btn-check" 
						name="btnradio" id="btnradio{{ $componentBlueprint->id }}"
		            	autocomplete="off" 
						wire:click="filter('{{ $componentBlueprint->id }}')"
				>
		</label>
@endforeach

igor1523

2 years ago

Level 1

Did it. Not working. The first time I click in any button the function works, but after that, no request is made in any click. The wire:click is there but seems that the JS don't work

Please or to participate in this conversation.