Laravel 10 - Livewire wire:clicks won't work

Question

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');
    }
}

score 0 · Answer 1 · answered Jul 10 '23 at 11:53

0

You need to include the component in the login.blade.php not the button itself.

Assuming the component is in Livewire\Component\Login

Instead of:

<button wire:click="login">Sign in</button>

Add the livewire component itself

<livewire:components.login />

And move the button to the livewire Login componenet.

answered Jul 10 '23 at 11:53

Yazeed

34
4

I'm sorry, I did not understand what u meant, I have the views folder that contains 2 folders: the layouts folder that contains the base view base.blade.php, and the livewire folder that contains the livewire views. So the login component path is views/livewire/auth/login.blade.php. So where I am supposed to add the "" ? – Karim Jammoul Jul 10 '23 at 12:23

Karim Jammoul · Answer 2 · 2023-07-10T13:28:45.403

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>

Laravel 10 - Livewire wire:clicks won't work

2 Answers2