Как сделать нумерацию страниц для API ресурса Laravel

Question

У меня есть модель, которую я разбил на страницы следующим образом:

$reserve = PropertyCalendar::paginate(1);
return new ReserveResource($reserve);

Я также создал API, который отвечает ресурсом, и в компоненте Vue я буду вызывать его с axios.get.

public function toArray($request)
{
  return parent::toArray($request);
}

Вот ответ API:

{
  "current_page": 1,
  "data": [
    {
      "id": 1,
      "property_id": 1,
      "user_id": 1,
      "payable_price": 11,
      "reserve_start": "2019-03-30 00:00:00",
      "reserve_end": "2019-04-01 00:00:00",
      "created_at":null,
      "updated_at":null
    }
  ],
  "first_page_url": "http:\/\/localhost:8000\/api\/reserve?page=1",
  "from": 1,
  "last_page": 2,
  "last_page_url": "http:\/\/localhost:8000\/api\/reserve?page=2",
  "next_page_url": "http:\/\/localhost:8000\/api\/reserve?page=2",
  "path": "http:\/\/localhost:8000\/api\/reserve",
  "per_page": 1,
  "prev_page_url": null,
  "to": 1,
  "total": 2
}

Теперь я хочу знать, как сделать для него нумерацию страниц, я не могу сделать это с традиционной нумерацией Laravel, как в компоненте Vue.

loadReserves() {
  axios.get("../api/reserve", {
    params: {
      commentId: this.comment_id
    }
  }).then((response) => (this.comments = response.data.data));
},

Теперь я показываю данные, но хочу разбить их на страницы, как в API.

Answer 1

Если использование bootstrap не является проблемой для вашего случая использования, я бы порекомендовал использовать этот плагин vue.

Я сам использую его с отличными результатами.

https://github.com/gilbitron/laravel-vue-pagination

Answer 2

Это пример начальной загрузки, показывающий, как вы можете использовать нумерацию Laravel с Vue.js

Пример .

<ul class="pagination">
  <li class="page-item" :class="{disabled: response.current_page === 1}">
    <a class="page-link" @click="previous">Previous</a>
  </li>
  <li 
      v-for="number in response.last_page"
      class="page-item"
      :class="{active: response.current_page === number}"
      >
    <a class="page-link" @click="navigateTo(number)">{{ number }}</a>
  </li>
  <li class="page-item" :class="{disabled: response.current_page === response.last_page}">
    <a class="page-link" @click="next">Next</a>
  </li>
</ul>