为什么在搜索栏中使用 laravel livewire 不起作用答案

【问题标题】：why in search-bar using laravel livewire doesn't work为什么在搜索栏中使用 laravel livewire 不起作用
【发布时间】：2021-10-22 09:41:56
【问题描述】：

我想向用户展示，但它不起作用，我写了 @livewireScripts 和 @livewireStyles

我不知道为什么我在 livewire docs 上找到了搜索教程并且做同样的事情但也不起作用并且不显示任何用户名

这是我的代码

我的 test.blade.php

@extends('layouts.master')
@section('css')

@livewireStyles
@section('title')
    empty
@stop
@endsection
@section('page-header')
<!-- breadcrumb -->
<div class="page-title">
    <div class="row">
        <div class="col-sm-6">
            <h4 class="mb-0"> </h4>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb pt-0 pr-0 float-left float-sm-right ">
                <li class="breadcrumb-item"><a href="#" class="default-color">Home</a></li>
                <li class="breadcrumb-item active">Page Title</li>
            </ol>
        </div>
    </div>
</div>
<!-- breadcrumb -->
@endsection

@section('content')
<!-- row -->
<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card card-statistics h-100">
            <div class="card-body">
                @livewire('counter')    
            </div>
        </div>
    </div>
</div>
<!-- row closed -->
@endsection

@section('js')

@livewireScripts

@endsection

我的 counter.blade.php

<ul>
    @foreach($users as $user)
        <li>{{ $user->name }}</li>
    @endforeach
</ul>

我展示组件时的路线

Route::view('test', 'test');

我的 Livewire 的 Counter.php

    <?php

namespace App\Http\Livewire;

use App\User;
use Livewire\Component;

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


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

【问题讨论】：

标签： laravel laravel-livewire

【解决方案1】：

这里有两个问题，一个是您从不更新您的 search 属性，另一个是 - 因为您从不更新 search-property - 您总是搜索那些名称为空的用户（这不是空）。

您应该进行三项更改，一项是创建一个绑定到$search proeprty 的输入元素，一项是使搜索成为“like”运算符（这意味着如果您搜索空字符串，所有结果将显示，如果您有一个名为 Foobar 的用户并且您搜索 Foo，它将显示在结果中）最后 - 因为当您更改搜索条件时您的结果可能会改变 - 您应该放置一个键入列表元素，以便 Livewire 知道哪一行是哪一行。键应该是整个页面中唯一的东西。

首先，向您的counter 视图添加一个新的输入元素。这将是您组件中的搜索属性。因为 Livewire 要求您在视图中只有一个根元素，所以我们将其全部包装在 <div> 中。这也是我们为不同结果添加关键的地方。

<div>
    <input wire:model="search" placeholder="Search users.." />
    <ul>
        @foreach($users as $user)
            <li wire:key="user-{{ $user->id }}">
                {{ $user->name }}
            </li>
        @endforeach
    </ul>
</div>

然后，我们需要更新您的检索结果，以实现like 功能。我们在搜索周围放置了 SQL 通配符 % 来实现这一点。

return view('livewire.counter', [
    'users' => User::where('name', 'like', '%'.$this->search.'%')->get(),
]);

【讨论】：

【解决方案2】：

深入了解您在 Livewire 组件中所做的工作。你已经初始化$search=''

接下来，您拨打Users::where('name', $this->search)->get()。但此时$this->search 是一个空字符串。因此，它要么不从您的数据库中返回用户，要么检索没有名称的用户。

最后，您尝试显示{{$user->name}}，即使您的数据库中有用户，所以您的数据库中没有任何没有名称的用户，或者您将看不到任何内容，因为这些用户没有没有名字。

您缺少一个搜索输入，其值绑定到 $search 变量。

将以下内容添加到您的counter.blade.php

<input type="text" wire:model="search" />

当您在该字段中输入名称时，它应该开始显示在您的列表中。

【讨论】：