BLOG // May 9, 2021

Livewire components public property must be of type X with Pagination

When using Livewire's Paginate function you may receive the following error if you have additional calls (like where) on your model:

Livewire component's public property must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them

This can be triggered by code that looks like this:

public function render()
{
    $this->users = User::where('foo', 'bar')->paginate(10);

    return view('livewire.users');
}

The key is to convert it into a collection, and to seperate out $links for your pagination display. Here is a converted example that will work:

public function render()
{
    $users = User::where('foo', 'bar')->paginate(10);
    $links = $users->links();
    $this->users = collect($users->items());

    return view('livewire.users', [
        'links' => $links,
    ]);
}

And that will resolve the issue.

Comments

Subscribe to new articles

If you enjoy my content, consider subscribing. You will only receive new blog stories, no other email.