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

Question

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

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

你好呀

我是 laravel livewire 的新手，面临一个奇怪的问题！。为了执行我使用 wire:click 的操作，可以在我的 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

Run Code Online (Sandbox Code Playgroud)

我的布局目录中的 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>

Run Code Online (Sandbox Code Playgroud)

现在我的组件 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');
    }
}

Run Code Online (Sandbox Code Playgroud)

我已经检查了我的 devtools 并且没有请求被发送到服务器

请原谅我的任何错误！

Answer 1

Kam*_*aul 6

从组件扩展布局

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

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

Run Code Online (Sandbox Code Playgroud)

并@section从admin-login.blade.php

归档时间：	5 年，4 月前
查看次数：	4012 次
最近记录：	4 年，8 月前