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