jesse_orange_newable
3 weeks ago

Laravel pagination in Vue.js

Posted 3 weeks ago by jesse_orange_newable

I am using Laravel's paginate method with Vue.js for a load more button, the pagination in my Vue component is an object like so:


(this.pagination = {
  from: response.data.from,
  to: response.data.to,
  total: response.data.total,
  current_page: response.data.current_page,
  last_page: response.data.last_page,
  next_page_url: response.data.next_page_url,
  prev_page_url: response.data.prev_page_url,
}),

As you can see I'm just grabbing what the paginate method responds with.

Here is the base paginate method


    /**
     * Paginate the given query into a simple paginator.
     *
     * @param  int  $perPage
     * @param  string  $pageName
     * @param  int|null  $page
     * @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
     */
    public function paginate($perPage = null, $pageName = 'page', $page = null)
    {
        $engine = $this->engine();

        $page = $page ?: Paginator::resolveCurrentPage($pageName);

        $perPage = $perPage ?: $this->model->getPerPage();

        $results = $this->model->newCollection($engine->map(
            $this, $rawResults = $engine->paginate($this, $perPage, $page), $this->model
        )->all());

        $paginator = (new LengthAwarePaginator($results, $engine->getTotalCount($rawResults), $perPage, $page, [
            'path' => Paginator::resolveCurrentPath(),
            'pageName' => $pageName,
        ]));

        return $paginator->appends('query', $this->query);
    }

In Vue how can I append or amend parameters?

I see it has a query parameter already, is it possible to add more?

Please sign in or create an account to participate in this conversation.