Laravel 8 компонент Livewire Неопределенная переменная: заголовок

#laravel #laravel-livewire

Вопрос:

Я создал компонент Livewire в Jetstream и установил его как полностраничный компонент на странице web.php маршрута следующим образом:

 use AppHttpLivewirePostComponent;
...
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 , я получаю следующую ошибку:

Неопределенная переменная: заголовок (Вид: /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>

Тем не менее, я получаю ту же ошибку.

Чего мне не хватает? Как мне это исправить?

Ответ №1:

Я надеюсь, что это Jetstream проект. По умолчанию livewire будет использовать в app.blade.php качестве макета. И компонент будет отображаться в slot app.blade.php .

Но поскольку это проект Jetstream, в нем есть слот для заголовка в файле макета.

   <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 проблема, связанная с этой темой (закрытая). Но следите за этим. поскольку Jetstream он находится на ранних стадиях.