why wire:click not working in laravel livewire

Question

laaravel version:8.0
livewire version: 2.x

Hi there

I am new to laravel livewire and facing a strange issue!. in order to execute the action i used wire:click as can be seen in the following code in my admin-login.blade.php

@section('content')
<div class="admin-login display-flex  flex-align-items-center flex-justify-content-center">
    <button wire:click="toDo">{{$login}}</button>
    <div class="admin-form display-flex flex-direction-column flex-justify-content-center" >
        @livewire('header',['name'=> 'Admin Login','width'=> '100%','height' => '20%'])
    <form  class=" display-flex flex-direction-column flex-justify-content-center"  >
        <section style="margin: 2%;">
        <label for="Email">Email :<span style="color: red">*</span></label>
        <input type="email" required>
        </section>
        <section style="margin: 2%;">
            <label for="Password">Password :<span style="color: red">*</span></label>
            <input type="password" required>
        </section>

            <button  style="width: 40%; height: 5vh; align-self: center;justify-self: flex-end;">Login</button>

    </form>
    </div>
</div>
@endsection

my app.blade.php file in layouts directory is

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{asset('css/admin/app.css')}}">
    @livewireStyles

    <title>Admin Dashboard</title>


</head>
<body>
@livewire('nav-bar')
@livewire('side-bar')
@yield('content')
</body>

@livewireScripts

<script>
    var isStudentDropDown = false
    Livewire.on('showSidebar',()=>{
        document.getElementById('sidebar').style.display = "block"
    })
    Livewire.on('closeSidebar',()=> {
        document.getElementById('sidebar').style.display = "none"
    })
    Livewire.on('showDropdown',data => {
        if(document.getElementById(data).style.display === "block"){
            document.getElementById(data).style.display = "none"
        }else{
            document.getElementById(data).style.display = "block"
        }

    })
</script>

</html>

now my component php file

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class AdminLogin extends Component
{
    public $login = "login";
    public function render()
    {
        return view('livewire.admin-login');
    }
    public function hell(){
       $this->login = "signup";
    }
    public function toDo(){
        dd('do some thing');
    }
}

i have checked my devtools and got no request being send to the server

Pardon me for any mistake!

no errors shown and i have also checked my dev tools no request sent to server — shahab ud din gohar
Route::prefix('/admin')->group(function() { Route::get('/',\App\Http\Livewire\AdminLogin::class); Route::get('/dashboard', \App\Http\Livewire\Dashboard::class)->name('admin-dashboard'); Route::prefix('/student')->group(function(){ Route::get('/',\App\Http\Livewire\StudentDetails::class); Route::get('/create',\App\Http\Livewire\CreateStudent::class); }); }); — shahab ud din gohar

Kamlesh Paul Kamlesh Paul · Accepted Answer · 2020-10-05T11:08:25

Extends layouts from component

ref link https://laravel-livewire.com/docs/2.x/rendering-components#custom-layout

public function render()
{
   return view('livewire.admin-login')
   ->extends('layouts.app')
   ->section('content');
}

and remove @section from admin-login.blade.php

why wire:click not working in laravel livewire

1 Answers

Extends layouts from component