On a fresh Laravel 8.4 installation with Jetstream, I have a (full) Livewire component which doesn't render in Blade component slot.
Route:
// App/Livewire/Page/Index -> livewire full component
Route::get('pages', Page::class)->name('page.index');
Liviwire component class app/livewire/Page/ Index.php
public $search = '';
public function updatingSearch() {
$this->resetPage();
}
public function render()
{
$pages = Page::where(function($query) {
$query->where('name', 'like', '%' . $this->search . '%')
->orWhere('description', 'like', '%' . $this->search . '%');
})
->paginate(10);
return view('livewire.page.index', [
'pages' => $pages
]);
}
App layout (layouts/app.blade.php)
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
@livewire('navigation-menu')
<!-- Page Heading -->
@if (isset($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>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
@stack('modals')
@livewireScripts
</body>
Liviwire component
<div>
<x-slot name="header">
<div class="sm:flex sm:items-center sm:justify-between">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dogs') }}
</h2>
<!-- This input doesn't bind to search property within the Livewire class because it's inside a named slot -->
<input type="text" wire:model="search">
</div>
</x-slot>
<!-- This input successfully binds to search as expected because it is in the default slot -->
<input type="text" wire:model="search">
</div>
After some debugging, found that the livewire works as expected within the default slot of the layout, but not inside a named slot (header).
Is there any soltion to this?