検索結果などのリストをページに分割して表示しているのをよく見かけると思います。 一からつくろうと思うと結構厄介なのですが、それを簡単に実現できるライブラリ「[vuejs-paginate](https://github.com/lokyoung/vuejs-paginate)」を見つけたので、設定をメモしておきます。 ### サンプル まずはiTune APIの楽曲データを使わせてつくったサンプルがありますのご覧ください。 https://www.chaordic.co.jp/memorandum/sample/pagination-itunes-test/ https://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/50/0001.png ソースのダウンロードは[コチラ](https://www.chaordic.co.jp/memorandum/sample/pagination-itunes-test.zip)から。 ### 実装 実装はCDN／UMDで行いました。まず「vuejs-paginate」をCDNで読み込みます。 ＜script src="//unpkg.com/vuejs-paginate@2.1.0"＞＜/script＞ ### conponents 「vuejs-paginate」を登録します。 components: { 'paginate': VuejsPaginate, }, ### data 表示対象となるリストデータを「this.listdata」としています。 ページネーションの設定として、1ページに表示する件数（parPage）と、現在のページ（currentPage）を登録します。 data(){ return { listdata: […], // 表示対象となるリストデータ parPage: 10, // 1ページに表示する件数 currentPage: 1// 現在のページ } }, ### computed 「getItems」で、1ページに表示する数を計算しています。 「getPageCount」で、全体のページ数を計算しています。 computed: { getItems: function(){ let current = this.currentPage * this.parPage; let start = current - this.parPage; return this.listdata.slice(start, current); }, getPageCount: function(){ return Math.ceil(this.listdata.length / this.parPage); } }, ### methods ページネーションがクリックされた時の処理です。クリックされたページ番号をthis.currentPageに渡しているだけです。 methods: { pagination_click(pageNum) { this.currentPage = Number(pageNum); } }, ### template ページネーション部分 ＜paginate :page-count="getPageCount" :page-range="5" :margin-pages="2" :click-handler="pagination_click" :prev-text="'＜'" :next-text="'＞'" :container-class="'pagination'" :page-class="'page-item'"＞ ＜/paginate＞ リスト表示部分 ＜ul＞ ＜li v-for="(item, i) in getItems"＞{{ item.** }}＜/li＞ ＜/ul＞