It seems like you're trying to store a LengthAwarePaginator instance as a property of a Livewire component, which is not supported because Livewire tries to keep all properties in sync between the front-end and the back-end. Complex objects like LengthAwarePaginator cannot be serialized and sent to the front-end.
Instead of storing the paginator itself as a property, you should store the necessary data to construct the paginator when needed. Here's how you can modify your Livewire component to work with pagination:
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Pagination\LengthAwarePaginator;
use Illuminate\Support\Collection;
class YourLivewireComponent extends Component
{
use WithPagination;
public $members; // Assuming this is an array of your data
public function render()
{
return view('your-view', [
'members' => $this->schoolEnsembleMembersPagination(),
]);
}
private function schoolEnsembleMembersPagination(): LengthAwarePaginator
{
// Convert array into collection
$collection = collect($this->members);
// Define how many items we want to be visible in each page
$perPage = 20;
// The current page, defaulting to 1 if none is set, or if the provided value is invalid
$currentPage = $this->page; // This is provided by the WithPagination trait
// Slice the collection to get the items to display in the current page
$currentPageItems = $collection->slice(($currentPage - 1) * $perPage, $perPage)->values();
// Create our paginator and pass it to the view
return new LengthAwarePaginator($currentPageItems, count($collection), $perPage, $currentPage, [
'path' => request()->url(),
'query' => request()->query(),
]);
}
}
In your Blade view, you can then use the pagination links as follows:
<div>
@foreach($members as $member)
{{-- Display your member data --}}
@endforeach
{{ $members->links() }}
</div>
Remember to replace 'your-view' with the actual name of your Blade view file and adjust the @foreach loop to display your member data accordingly.
By using the WithPagination trait, Livewire will handle the pagination state for you, and you don't need to store the paginator instance in a property. The render method will create a new paginator instance every time it's called, which is what you want for rendering the view.