Bind Livewire property within Blade component in Laravel 8 Jetstream

Viewed 1177

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?

1 Answers
Related