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