Laravel에서 paginate 메소드를 json으로 받았을 시에 데이터는 다음과 같다.
response1
2
3
4
5
6
7
8
9
10
11
12
| {
"current_page": 1,
"data": [{}, {}, {}],
"from": 1,
"last_page": 1,
"next_page_url": null,
"path": "https://example.com/ajax/list",
"per_page": 15,
"prev_page_url": null,
"to": 8,
"total": 8
}
|
이 데이터를 blade에서 links 메소드로 쉽게 사용할 수 있는 것 처럼 Vue에서도 그럴 수는 없을까?
Laravel Vue Pagination 패키지를 활용하면 된다.
SPA일 경우에는 다운 받고 Usage 탭에 적힌대로 바로 사용하면 되지만, Multi Page일경우는 직접 컴포넌트를 가져와야한다.
사용법
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <ul>
<li v-for="post in response.data" v-text="post.title"></li>
</ul>
<nav>
<pagination
:data="response"
:limit="3"
@pagination-change-page="fetchPosts"
/>
</nav>
<script>
new Vue({
data: {
response: {
data: [],
},
},
methods: {
fetchPosts: function (page) {
var vm = this;
axios
.get('url', {
params: {
page: page || 1,
},
})
.then(function (response) {
vm.response = response;
});
},
},
});
</script>
|
예외처리
Component 소스의 template 부분을 보면 nav로 감싸져있지 않기에 Laravel 기본 템플릿과 일치시키려면 nav 태그로 감싸주면 된다.