Issue with LiveWire Pagination

Hello, I'm trying to paginate items in a livewire component, I have this query

protected $listeners = [
  'franchises:coords' => 'getFranchises'
];

use WithPagination;
public $franchiseList;

    public function render()
    {
        return view('livewire.franchise-list');
    }

public function getFranchises($coords)
{
    if ($coords) {
        $latitude = json_decode($coords)[0];
        $longitude = json_decode($coords)[1];
        $radiusInMeters = 800;

        $this->franchiseList = Franchise::select(DB::raw('*, ( 6371000 * acos( cos( radians(' . $latitude . ') )
        * cos( radians( latitude ) ) * cos( radians( longitude ) - radians(' . $longitude . ') )
        + sin( radians(' . $latitude . ') ) * sin( radians( latitude ) ) ) ) AS distance'))
            ->having('distance', '<', $radiusInMeters)
            ->orderBy('distance')
            ->paginate(8);
    }
}

and in my blade view, I have this

@if(!empty($franchiseList))
                {{$franchiseList->links()}}
@endif

but I get this error

Livewire component's [franchise-list] public property [franchiseList] 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.

If I try to change pagination by adding these lines to the getFranchises function and adding $links to public

public $franchiseList, $links;

        //after paginate
        $this->links = $this->franchiseList;
        $this->franchiseList = collect($this->franchiseList->items());

and in the blade change to this

            @if(!empty($franchiseList) && $links->links())
                {{$links->links()}}
            @endif

I get the same error but with links

Livewire\Exceptions\PublicPropertyTypeNotAllowedException
Livewire component's [franchise-list] public property [links] 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.

How can I paginate in livewire? where is the problem?

knubbe

4 years ago

Level 36

You must use WithPagination trait. https://laravel-livewire.com/docs/2.x/pagination

andrecuellar

4 years ago

Level 1

@knubbe using WithPagination, I get the same problem with franchiseList

Livewire component's [franchise-list] public property [links] 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.```

andrecuellar

4 years ago

Best Answer

Level 1

problem solved, when using pagination, javascript cannot access the public variable as it does not accept that data type, simply passing the variable to view and making it private solves

    private $franchiseList;

    use WithPagination;

    public function render()
    {
        return view('livewire.franchise-list', ['franchiseList' => $this->franchiseList]);
    }

Please or to participate in this conversation.