Search code examples
phplaravellaravel-livewirelaravel-livewire-wireclick

Laravel 10 - Livewire wire:clicks won't work

I'm using Livewire 2.12 and Laravel 10.10.

I have a problem in Livewire, when I'm clicking on the sign in button, the "login" function in the Login.php component is not executed.

Could the reason be that I'm using the "@yield('content')" sections and not the "{{ $slot }} ? If so, how to fix the issue? because if I used the "{{ $slot }}" instead of the "@yield('content')", I get an error that the $slot variable is undefined.

I have this base layout:

base.blade.php :

<!DOCTYPE html>

<html>
<head>
   // all imported styles...
   @livewireStyles
</head>

<body>
  @yield('content')

  // all imported scripts...
  @livewireScripts
</body>

</html>

and here is my login view login.blade.php:

@extends('layouts.base')

@section('content')

<div class="container">
       
     <div class="mb-3">
         <label for="email" class="form-label">Email</label>
         <input
              wire:model="email"
              type="text"
              class="form-control"
              id="email"
              name="email"
              placeholder="Enter your email"
              autofocus
              required
         />
     </div>
     <div class="mb-3">
         <button wire:click="login">Sign in</button>
     </div>                 
    
</div>

@endsection

and here is my livewire component Login.php:

<?php

namespace App\Http\Livewire\Auth;

use Livewire\Component;

class Login extends Component
{
    public $email = '';

    public function mount()
    {
        if(auth()->user())
        {
            redirect('/dashboard');
        }
    }

    public function login()
    {
        dd('efefeff');
    }

    public function render()
    {
        return view('livewire.auth.login');
    }
}
Solution

  • I fixed it.

    I have changed the @yield('content') in the base.blade.php file into {{ $slot }}, then made these changes in the login.blade.php file :

    <x-layouts.base>

<div class="container">
   
    <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <input
             wire:model="email"
             type="text"
             class="form-control"
             id="email"
             name="email"
             placeholder="Enter your email"
             autofocus
             required
        />
     </div>
     <div class="mb-3">
         <button wire:click="login">Sign in</button>
     </div>                 

</div>

</x-layouts.base>