Graceful Light

Vue - Laravel Pagination 연동

2017-11-28


Laravel에서 paginate 메소드를 json으로 받았을 시에 데이터는 다음과 같다.

response
1
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
<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 태그로 감싸주면 된다.

🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요