为什么 wire:click 在 laravel livewire 中不工作

Question

laaravel version:8.0
活线版本：2.x

你好

我是 laravel livewire 的新手，遇到了一个奇怪的问题！。为了执行我使用 wire:click 的操作，可以在我的管理中的以下代码中看到-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

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

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

如有错误请见谅！

Answer 1

从组件扩展布局

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

并从 admin-login.blade.php

中删除 @section

为什么 wire:click 在 laravel livewire 中不工作

why wire:click not working in laravel livewire

laravel

laravel-livewire

从组件扩展布局