在 Laravel 8 Jetstream 的 Blade 组件中绑定 Livewire 属性

Posted 2023-03-14

技术标签:

【中文标题】在 Laravel 8 Jetstream 的 Blade 组件中绑定 Livewire 属性【英文标题】：Bind Livewire property within Blade component in Laravel 8 Jetstream 【发布时间】：2021-10-13 20:32:45 【问题描述】：

在使用 Jetstream 全新安装 Laravel 8.4 时，我有一个（完整的）Livewire 组件，它不会在 Blade 组件槽中呈现。

路线：

 // App/Livewire/Page/Index -> livewire full component
 Route::get('pages', Page::class)->name('page.index');

Liviwire组件类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
    ]);

应用布局（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 组件

<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>

经过一些调试，发现 livewire 在布局的默认插槽内按预期工作，但在命名插槽（标题）内却没有。

有什么解决办法吗？

【问题讨论】：

【参考方案1】：

我没有尝试这样做，因为我的印象是命名槽与主槽有些不同。但是，我发现了这一点 - 它可能会有所帮助：https://www.gitmemory.com/issue/livewire/livewire/2322/756962391

【讨论】：

嗯，这个解决方案确实有道理，我还认为这可能是由于将内容放置在 livewire 控制之外的其他地方。但由于我使用的是完整的 livewire 组件，因此不太确定 livewire 开始覆盖哪个 DOM 节点。也许在

下，因为标题组件在我的情况下不起作用。无论如何，我最终还是通过在默认插槽中包含

部分来解决这个问题，现在 Livewire 可以按预期工作。感谢您的回复

请不要使用gitmemory.com，这是原文出处：github.com/livewire/livewire/issues/2322

以上是关于在 Laravel 8 Jetstream 的 Blade 组件中绑定 Livewire 属性的主要内容，如果未能解决你的问题，请参考以下文章

CSS 不会在 XAMPP 上的 Laravel 8 + Jetstream 中加载