Laravel livewire pagination error on mount

#1

im trying to retrive the users on page mount and paginate them using the following code:

public function mount()
{
     $this->users = User::where('register_completed', '1')->paginate(16); 
}

but im getting this error:

Livewire component's [user-search] public property [users] 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.

The plan is to load all of the users using mount on page load and then let the user filter them using a filter form with multiple criteria. the paginator works using this code:

public function render()
{
    return view('livewire.user-search', [
            'users' => User::where('register_completed', '1')->paginate(16),
        ])
            ->extends('layouts.app')
            ->section('content');
}

but I need to use a specific function to filter the results based on the selected criteria. also, the search is not real-time and there is a button to call the search filter function. not sure why pagination only works when passed through the render method. also, the $users is a public property to access it from the view.
I believe it has something to do with livewire pagination because the same code works once I remove the paginate(16) from the component and the $users->links() from the view but still can’t figure out how to resolve this issue.

#2

Hi,
Look this example in the doc, look the example with search

If that doesn’t fit to you I made something that fits my needs base on multiples filters

Look this example
use WithPagination;
public property search
public function searchterm()
{
$filter=User::query(); // prepare the query to filter by multiples conditions
if($this->search!="") {
$filter->orwhere(‘name’, ‘like’, “%$this->search%”);
$filter->orWhere(‘email’, ‘like’, “%$this->search%”);
}

      return $this->paginate($filter->get());
// I got many more filters in this function but this is only for example purpose

     }

//function to paginate filtered results
    private function paginate($items, $perPage = 6, $page = null, $options = [])
    {
        $page = $page ?: (Paginator::resolveCurrentPage() ?: 1);
        $items = $items instanceof Collection ? $items : Collection::make($items);
        return new LengthAwarePaginator($items->forPage($page, $perPage), $items->count(), $perPage, $page, $options);
    }

// then render method I verify if the user is filtering or not to send specific data
 public function render()
    {

        $users = $this->searchterm() !== "" ? $this->searchterm() : User::paginate(6);
        ///if user not filtering then I show non filtered results

        return view('livewire.users.user-index',['users'=>$users]);
    }
#3

Hey, @sxshateri

If you want to control the number of retrieved data create a property called $paginateNumber and pass it into the pagination method

public $pagianteNumber = 10;

$model->paginate($this->pagianteNumber);
#4

Thanks for the reply but guess I was not able to deliver my point across well. the point is to be able to get the users from User model in the mount instead of Render method and do the filtering using a separate method. i am able to do so in the render method but I would like to do it in the mount method not in the render method to avoid retrieving the query on every render. i tried so many solutions but none of them worked in the mount method and all gave the same error. i guess it has something to do with the pagination in Livewire because on DD I get the expected data plus the pagination metadata but for some reasons it gives me that error.

#5

your solution is good but it wont work in the mount method and that is my problem as well. i want to avoid using the render method for some performance issue. also i don’t wanna go the extra mile to create a custom pagination.

#6

Thanks for the reply but that was not the issue.

#7

The main problem is that the way you want it, Livewire doesn’t support it, because when you paginate you return a type of object that livewire cannot work with it.

#8

yeah, I guess that’s the issue. the way Livewire supports pagination is kinda limited to the render method.