wire:click not firing method in its component

Question

I am trying to implement Logout functionality on my Laravel app with TALL stack, I am firing logout event from my blade via Livewire wire:click but it doesn't seem to fire any method from its own component.

Loading my component in app.blade.php layout:

<li class="flex">
   @livewire('logout')
</li>

logout.blade.php

<a
    wire:click="logout"
    class="some-classes"
>
    <svg
        class="w-4 h-4 mr-3"
        aria-hidden="true"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        stroke="currentColor"
    >
        <path d=""></path>
    </svg>
    <span>Log out</span>
</a>

Logout.php (Livewire Component)

<?php

namespace App\Http\Livewire;

use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;

class Logout extends Component
{
    use AuthorizesRequests;

    public function render()
    {
        return view('livewire.admin-panel.logout');
    }

    public function logout()
    {
        Auth::logout();
        $this->redirect(route('login'));
    }
}

I have tried dump inside function and it turned out that the methods are not being called. I have sigle root <a></a> in component's view, using <div> doen't make any difference either.

I used <button> in place of <a> and it didn't work either. I wonder what I could possibly be doing wrong here. If there's any other way of doing this that would be much appreciated.

Do you have any console warnings or errors? Is Livewire loaded properly? — Qirel, Jan 15 '22 at 20:29
@Qirel as mentioned above, console shows nothing, dumping inside the `logout` doesn't work either. Simply saying once rendered it nevers calls any of methods from component. — Salman Malik, Jan 16 '22 at 11:26

score 0 · Answer 1 · answered Jan 15 '22 at 19:24

0

I assume you include livewire assets and livewire scripts.

You should see this answers from similar question:

first, second.

the solution for this error is usually the first answer. try like that, maybe that helps:

<li class="flex">
    <div>
       @livewire('logout')
    </div>
</li>

and

<div>
  <a
    wire:click="logout"
    class="some-classes"
>
    <svg
        class="w-4 h-4 mr-3"
        aria-hidden="true"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        viewBox="0 0 24 24"
        stroke="currentColor"
    >
        <path d=""></path>
    </svg>
    <span>Log out</span>
 </a>
</div>

answered Jan 15 '22 at 19:24

Alper

152
1
7

2

It doesn't have to be a div. It just need to be one root element, which is already the case. – Qirel Jan 15 '22 at 20:28
As already mentioned, and as per livewire docs, it has to be a single root element, and for solutions you suggested, I have already tried similar solutions if you look at the question closely. – Salman Malik Jan 16 '22 at 11:31

wire:click not firing method in its component

1 Answers1