why in search-bar using laravel livewire doesn't work

user_13508553 0
Viewed 311

i want to show the user but it doesn't work and i wrote @livewireScripts and @livewireStyles

i dont know why i found search tutorial at livewire docs and doing the same but don't work also and not showing up any name of users

here is my code

my 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

my counter.blade.php

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

my route when i show the component

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

my Counter.php of livewire

    <?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-livewire laravel
2 Answers

You have two issues here, one is that you never update your search property, and the other is - because you never update the search-property - you always search for those users who have an empty name (which is not null).

You should be making three changes, one to create an input-element that is bound to the $search proeprty, one to make the search a "like" operator (meaning that if you search for an empty string, all results will be shown, and if you have a user called Foobar and you search for Foo, it will show up in the results) and finally - because your results can change when you change your search criteria - you should be putting a key the list-elements, so Livewire know which row is which. The key should be something that is unique across your page.

First, add a new input-element to your counter view. This will be the search-property in your component. Because Livewire requires you to have only one root element in the view, we wrap it all in a <div>. This is also where we add the key to the different results.

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

Then, we need to update your retrieval of the results, in order to implement the like functionality. We put SQL wildcards % around the search to make this happen.

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

Take a deep look into what you are doing in your Livewire Component. You have initialized $search=''

Next, you are calling Users::where('name', $this->search)->get(). But at this point $this->search is an empty string. So it's either not returning users from your database or retrieving users without a name.

Finally, you are trying to display {{$user->name}} which even if there were users in your database, so either you don't have any users in your database without a name or you won't see anything because those users don't have a name.

You are missing a Search Input whose value is bound to the $search variable.

Add the following to your counter.blade.php

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

And when you type a name in that field it should begin displaying in your list.

user_45528460
Related