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插件。

我自己使用它效果很好。

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

Answer 2

这是一个带有引导程序的示例，展示了如何在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>

如何对Laravel资源API进行分页

2 个答案: