LiveWire 方法不适用于简单组件

Question

我创建了一个用于 liveWire 的新的简单组件，我试图从单一路径使用这个组件，在下面的简单实现中 increment 和 decrement 不工作对我来说

路线：

Route::get('/login',LoginComponent::class);

LoginComponent::class:

class LoginComponent extends Component
{
    public $count = 10;

    public function render()
    {
        return view('livewire.auth.login')->layout('livewire.auth.app');
    }

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }
}

app.blade.php:

<!DOCTYPE html>
<html lang="en">

<head>
    ...

    @livewireStyles
</head>

<body>
    <div class="page-content">
        <div class="content-wrapper">
            @yield('content')
        </div>
    </div>

    @livewireScripts
</body>

</html>

然后 login.blade.php:

<div>
    @section('content')
        <div class="page-content">
            <div class="content-wrapper">
                <div class="content d-flex justify-content-center align-items-center">
                    <div style="text-align: center">
                        <button wire:click="increment"> + </button>

                        <button wire:click="decrement"> - </button>

                        <h1>{{ $count }}</h1>
                    </div>
                </div>
            </div>
        </div>
    @endsection
</div>

Answer 1

我建议使用正确的渲染方法。

return view('livewire.auth.login')
    ->extends('livewire.auth.app')
    ->section('content');

并从 login.blade.php

中删除 @section('content')

查看 Rendering Components

上的文档

Answer 2

我已经按照 Livewire 文档中的描述尝试了旧的 @yield/@section Laravel 样式，没有问题。

你的 app.blade.php 似乎没问题。

但是您的 LoginController 渲染方法必须使用 extends():

public function render()
{
    return view('livewire.auth.login')->extends('livewire.auth.app');
}

并且您应该从 login.blade.php 组件中删除 @section。

LiveWire 方法不适用于简单组件

LiveWire methods not working on simple compnent

laravel

laravel-livewire