Input Type Radio not invoking function

#1

Hi,

Here is my markup.

<div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
           <label class="btn btn-outline-primary" title="Display as a list">
               <input type="radio" wire:click="toggleView" name="options" id="option1" autocomplete="off"/> <i
                   class="fa fa-list"></i>
           </label>
           <label class="btn btn-outline-primary" title="Display as a grid">
               <input type="radio" wire:click="toggleView" name="options" id="option2" autocomplete="off"/> <i
                   class="fa fa-th-large"></i>
           </label>
       </div>

and here is class

class ContactApp extends Component
{
    public $viewMode = 'list';

    public function toggleView() {
        $this->viewMode = "grid";
    }

    public function render()
    {
        return view('livewire.contact-app');
    }
}

The problem is its not invoking the function. If I use normal <button wire:click="toggleView">Gird</button> It works, but not working with radio inputs

#2

instead of

wire:click="toggleView"

You should do:

wire:click="toggleView('grid')" //for gird

wire:click="toggleView('list')" //for list

and in your class change your method to accept a parameter

    public function toggleView() {
        $this->viewMode = "grid";
    }

    public function toggleView($mode) {
        $this->viewMode = $mode;
    }
2 Likes
#3

Tried this too, The main problem is wire:click is not responding on <input type="radio" wire:click="toggleView"> while it works normal <button wire:click="toggleView">

Not able to see it in XHR

I am testing it without parameters for now.

#4

Your original code works just fine.

#5

I just figured out.
I was using jquery, As I removed jquery it started working.

Thank you :slight_smile:

1 Like