Question 204657 in Laravel Question posted in
The official Laravel Documentation can be found here.

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 AppHttpLivewireAuth;

use LivewireComponent;

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

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

    Assuming the component is in LivewireComponentLogin

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search