如何为 Laravel 资源 API 进行分页

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
}

现在我想知道如何为它进行分页，我无法像在 Vue 组件中那样使用传统的 Laravel 分页。

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

现在我正在显示数据，但我想像 API 中的那样对其进行分页。

Answer 1

这是一个带有引导程序的示例，展示了如何在 Vue.js 中使用 Laravel 分页

Example.

<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>

Answer 2

如果使用引导程序对您的用例来说不是问题，我建议使用这个 vue 插件。

我自己使用它，效果很好。

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