My live search using livewire is not working-CodePudding

I am doing a live search on livewire, my search term is already binded with the livewire controller, but when I add it to the where clause in render function, it still displays all the data on the table not the one i am searching. I tried replacing the searchterm with a string as keyword in LIKE and it works. It seems that i can't use the input in searchterm as a keyword in the where clause.

here is my controller;

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Item;
use Livewire\WithPagination;

class Items extends Component
{
    use WithPagination;
    public $searchTerm;

    public function render()
    {
        $select = Item::where('itemName', 'LIKE', '%' . $this->searchTerm . '%')->paginate(6);
        return view('livewire.items', ['items' => $select]);
    }
}

this is my view

<div >
    <div >
        <h4 >All Categories</h4> 
        <h4 >Men</h4>  
        <h4 >Women</h4> 
    </div>
    <div >
        <input type="text"  id="search" placeholder="Browse Products" wire:model="searchTerm"/>
    </div>
    {{$searchTerm}}
</div>
<hr style="border-top: dotted 1px;" />

<div >
    <table >
        <tbody>
        <div>
        @foreach($items as $item)
        <tr >
            <div >
                <h4 >{{ $item->itemName }}</h4>
                <div >
                    <img src="items/{{ $item->itemPic }}.png" alt="" >
                </div>
                <div >
                    <div >
                        Price: US ${{ $item->itemPrice }}
                    </div>
                    <div >
                        {{ $item->itemCOD }}</td>
                    </div>
                </div>
            </div>
            
        </tr>
        </tbody>
        @endforeach
        </div>
       
        <hr style="border-top: dotted 1px;" />  
        <div >
            {{ $items->links('pagination::pagination-custom') }}
        </div>  
        <hr style="border-top: dotted 1px;" />  
       
   </table>
</div>

CodePudding user response：

There's two things here that could potentially cause problems,

Your tr element does not have wire:key, the value to wire:key must be unique across the entire page
Your view consists of multiple root elements (if this is your entire view), these are the three root-elements in your view - and in Livewire, its very important that the view only has one root element.
- <div >
- <hr style="border-top: dotted 1px;" />
- <div >

Also, as a sidenote, your loop also closes the tbody tag, which is odd, so I moved that out of the loop. It also doesn't quite make sense to put divs and hrs inside the table tag, those should probably be outside of the tabletag.

Here's the updated view, with wire:key on the tr and with the whole view wrapped in one div,

<div>
    <div >
        <div >
            <h4 >All Categories</h4> 
            <h4 >Men</h4>  
            <h4 >Women</h4> 
        </div>
        <div >
            <input type="text"  id="search" placeholder="Browse Products" wire:model="searchTerm"/>
        </div>
        {{$searchTerm}}
    </div>
    <hr style="border-top: dotted 1px;" />

    <div >
        <table >
            <tbody>
                <div>
                    @foreach($items as $item)
                        <tr  wire:key="item-{{ $item->id }}">
                            <div >
                                <h4 >{{ $item->itemName }}</h4>
                                <div >
                                    <img src="items/{{ $item->itemPic }}.png" alt="" >
                                </div>
                                <div >
                                    <div >
                                        Price: US ${{ $item->itemPrice }}
                                    </div>
                                    <div >
                                        {{ $item->itemCOD }}</td>
                                    </div>
                                </div>
                            </div>
                        </tr>
                    @endforeach
                </div>
            </tbody>
                    
            <hr style="border-top: dotted 1px;" /> 
            
            <div >
                {{ $items->links('pagination::pagination-custom') }}
            </div>  

            <hr style="border-top: dotted 1px;" />  
        </table>
    </div>
</div>

Have a look at this resource from the official Livewire docs,

https://laravel-livewire.com/docs/2.x/troubleshooting#dom-diffing-issues

CodePudding user response：

Maybe because you not render component

Try add <livewire:name-component /> in parent view like this

<div class>
 <livewire:name-component />
</div>