时间戳

首页 > 解决方案 > 为什么在使用 laravel livewire 的搜索栏中不起作用

laravel - 为什么在使用 laravel livewire 的搜索栏中不起作用

问题描述

我想向用户展示，但它不起作用，我写了@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(),
        ]);
    }
    
}

标签： laravellaravel-livewire

解决方案

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

您应该进行三项更改，一项是创建一个绑定到属性的输入元素 $search，一项是使搜索成为“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(),
]);

推荐阅读