Livewire搜索未生成任何结果

提问者：小点点

Livewire搜索未生成任何结果

我是Livewire新手，有一些laravel经验和大量php经验。我的问题是，我正在尝试使用livewire搜索组件。我使用的是laravel 8，安装了livewire。我的导航菜单正在使用livewire。因此，我希望在我的布局中插入一个搜索，如下所示：

    <body class="font-sans antialiased">
        <x-jet-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')
            @livewire('search-accounts')
            ... rest of my layout ...
       </div>
   </body>

我有一个模型帐户，其中有我的应用程序使用的帐户。账户使用雄辩，工作正常。

我已经创建了一个livewire组件app/Http/livewire/SearchAccounts。包含以下内容的php：

<?php

namespace App\Http\Livewire;

use App\Models\Account;
use Livewire\Component;

class SearchAccounts extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.search-accounts', [
            'accounts' => Account::where( 'name', $this->search )->get(),
        ]);
    }

}

我的刀片模板是resouces/view/livewire/search-accounts.blade.php，如下所示：

    <div class="px-4 space-y-4 mt-8">
        <form method="get">
            <input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model="search"/>
        </form>
        <div wire:loading>Searching accounts...</div>
        <div wire:loading.remove>
            <!--
                notice that $search is available as a public
                variable, even though it's not part of the
                data array
            -->
            @if ($search == "")
                <div class="text-gray-500 text-sm">
                    Enter a term to search for accounts.
                </div>
            @else
                @if($accounts->isEmpty())
                    <div class="text-gray-500 text-sm">
                        No matching result was found.
                    </div>
                @else
                    @foreach($accounts as $account)
                        <div>
                            <h3 class="text-lg text-gray-900 text-bold">{{$account->name}}</h3>
                            <p class="text-gray-500 text-sm">{{$account->url}}</p>
                            <p class="text-gray-500">{{$account->ipaddress}}</p>
                        </div>
                    @endforeach
                @endif
            @endif
        </div>
    </div>

当我在浏览器中查看我的应用程序时，会显示搜索栏，其中包含一个名为“搜索帐户”的占位符。我单击搜索栏并开始键入，但没有进行搜索（我的浏览器开发工具显示没有网络或控制台活动）。

我错过什么了吗？我尝试了php artisan livewire:discover并清除了缓存。我遵循了一个教程(https://laravel-livewire.com/)不知道为什么我没有得到预期的结果。像这样的其他帖子实际上在ajax请求发出时获得了一些网络活动，我根本没有看到。

谢谢

克雷格

共2个答案

匿名用户

试着改变这个

<input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model="search"/>

到

<input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model.debounce.500ms="search"/>

这应该在事件发生后每500毫秒发送一次网络请求（有助于避免每次按键都敲击后端）。

看看这一页的文档https://laravel-livewire.com/docs/2.x/actions

匿名用户

原来我的@livewireScripts没有包含在我的主刀片模板中。一旦添加，livewire就开始工作了。