Laravel 8 Livewire 组件未定义的变量：header

Question

我在 Jetstream 中创建了一个 Livewire 组件，并在 web.php 路由页面中将其设置为 full-page 组件如下：

use App\Http\Livewire\PostComponent;
...
Route::get('posts/',PostComponent::class)->name('posts');

post-component.blade.php文件原本有如下代码：

<div>
    <h1>If you look to others for fulfillment, you will never truly be fulfilled.</h1>
</div>

如果我点击 URL .../posts 我得到以下错误：

Undefined variable: header (View: /home/vagrant/laravelapp/resources/views/layouts/app.blade.php)

所以我尝试在 post-component.blade.php 文件中添加插槽：

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>
    <div>
        <h1>If you look to others for fulfillment, you will never truly be fulfilled.</h1>
    </div>
</x-app-layout>

然而，我得到了同样的错误。

我错过了什么？我该如何解决这个问题？

Answer 1

我希望这是一个 Jetstream 项目。默认情况下，livewire 将使用 app.blade.php 作为布局。组件将在 app.blade.php.

的 slot 中呈现

但由于它是一个 Jetstream 项目，它在布局文件中有一个用于 header 的插槽。

  <header class="bg-white shadow">
       <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
             {{ $header }}
        </div>
  </header>

所以要解决这个错误，有两种方法。

在 PostComponent.php


 public function render()
 {
        return view('livewire.post-component')
         ->layout('layouts.app', ['header' => 'Post Compoent Page']);
 }

创建您自己的布局并且只有一个插槽。（假设 mylayout.blade.php）


<head>
    @livewireStyles
</head>
<body>
    {{ $slot }}

    @livewireScripts
</body>

并在渲染 livewire 组件时使用该布局

public function render()
{
   return view('livewire.post-component')->layout('layouts.mylayout');
}

关于这个话题有一个 github issue（一个封闭的）。但请注意它。因为 Jetstream 处于早期阶段。

Laravel 8 Livewire 组件未定义的变量：header

Laravel 8 Livewire component Undefined variable: header

laravel

laravel-livewire