paginationlaravel-livewirelaravel-paginationlaravel-9

Pagination links is not working properly in Laravel Livewire


I am using Laravel 9 and Livewire 2.x. Pagination links are not working correctly; it only changes one item. I tried to change the link on the address bar like /search?query=example&page=2, and that worked perfectly.

Component Class

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

class Search extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';
    public $query;

    protected $queryString = ['query'];
    public function render()
    {
        $products = $this->searchQuery($this->query);
        return view('livewire.products.search', [
            'products' => $products->paginate(6),
        ])->extends('layouts.buyer')->section('content');
    }

    public function mount()
    {
    }

    public function searchQuery($input){
        return Product::where('name','like','%' . $input . '%' );
    }
}

View

<div class="container my-5">
    @if($products->isNotEmpty())
        <div class="row g-4">
            @foreach($products as $product)
            <div class="col-lg-3">
                @livewire('products.buyer-product-item', ['product' => $product])
            </div>
            @endforeach

        </div>
    @else
    <div class="alert alert-danger">Product Was Not Found !!!</div>
    @endif
    <nav class="mt-5" aria-label="Page navigation example">
        {{ $products->links() }}
    </nav>
</div>

Solution

  • Hey After viewing the console I found there is an error. Cannot read property 'fingerprint' of null

    After including the key for the nested component the issue was solved.

    @livewire('products.buyer-product-item', ['product' => $product], key($product->id))