如何对Laravel资源API进行分页
如何对Laravel资源API进行分页
提问于 2019-04-19 15:23:56
我有一个模型，我这样分页：
$reserve = PropertyCalendar::paginate(1);
return new ReserveResource($reserve);我还做了一个用resource进行响应的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中那样对它进行分页。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-19 18:41:38
如果使用bootstrap对于你的用例来说不是问题，我推荐使用这个vue插件。
我自己也在使用它，效果很好。
Stack Overflow用户
发布于 2019-04-20 16:28:10
这是一些使用bootstrap的示例，展示了如何在Vue.js中使用Laravel分页
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55758110
复制相关文章
相似问题
腾讯云开发者
