为什么wire：click在laravel livewire中不起作用答案

【问题标题】：why wire:click not working in laravel livewire为什么wire：click在laravel livewire中不起作用
【发布时间】：2021-01-20 04:53:19
【问题描述】：

laaravel 版本：8.0
livewire 版本：2.x

你好

我是 laravel livewire 的新手，遇到了一个奇怪的问题！为了执行我使用wire的操作：点击我的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

我在 layouts 目录中的 app.blade.php 文件是

<!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>

现在是我的组件 php 文件

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

我检查了我的开发工具，没有收到任何请求发送到服务器

请原谅我的任何错误！

【问题讨论】：

没有显示错误，我还检查了我的开发工具没有向服务器发送请求
我已经更新了问题，请看！
Route::prefix('/admin')->group(function() { Route::get('/',\App\Http\Livewire\AdminLogin::class); 路由： :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); }); });

标签： laravel laravel-livewire

【解决方案1】：

从组件扩展布局

参考链接https://laravel-livewire.com/docs/2.x/rendering-components#custom-layout

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

并从admin-login.blade.php 中删除@section

【讨论】：