vue-paginateを使ってページネーションを実装する

はじめに

Vue.jsを使ってSPAを構築する時に、ページネーションを実装しようとしました。
当初、vuejs-paginateを使い、作ろうと思ったのですが、リストとの関連づけが上手くいかず断念しました。

vuejs-paginateのGitHubはこちら

そんな中、vue-paginateというパッケージを使ってページネーションを実装したので、その方法についてまとめます。名前が紛らわしいですが、上記とは別物です。

vue-paginateのGitHubはこちら。

使用するための準備

ターミナルなどでプロジェクトのフォルダに移動し、以下のコマンドを実行。

npm install vue-paginate --save

javascripに以下を記載。

app/javascript/packs/log.js

import VuePaginate from 'vue-paginate';
Vue.use(VuePaginate);

データを設定

ページを切り替えたいdataは配列にします。自分の場合、以下のようになっていました。

<script>
export default {
  data: function () {
    return {
      // logs: [{id: 1, title: 'test'}, {id: 2, title: 'test2'}]のように入る
      logs: []
    }
  }
}
</script>

dataにpaginateという項目を持たせます。paginateは配列にし、要素は任意の文字列にします。

<script>
export default {
  data: function () {
    return {
      logs: [],
      paginate: ['paginate-log']
    }
  }
}
</script>

ページネーションを実装

v-forを使って、表示させている箇所を覆うようにpaginateタグを付与します。

<template>
  <div>
    <ul>
      <paginate name="paginate-log" :list="logs" :per="5">
        <li v-for="log in paginated('paginate-log')">
          {{ log.id }}: {{ log.title }}
        </li>
      </paginate>
    </ul>
  </div>
</template>

nameには先程設定したpaginate: ['paginate-log']の文字を指定します。
:listにはページで切り替えたい、dataの配列を指定します。
:perには1ページあたりの要素数を記載します。
そして、v-forの部分にpaginated()を付けます。

さらに、paginate-linksを記載し、ページの部分を表示させます。

<template>
  <div>
    <ul>
      <paginate name="paginate-log" :list="logs" :per="5">
        <li v-for="log in paginated('paginate-log')">
          {{ log.id }}: {{ log.title }}
        </li>
      </paginate>
    </ul>
    <paginate-links for="paginate-log" class="pagination" :show-step-links="true"></paginate-links>
  </div>
</template>

forの部分はページで切り替えたいdataの配列を指定します。
:show-step-linksは<< 1 2 3 >>の<<や>>の部分を表示させます。

おわりに

vue-paginateを使って簡単にページネーションを実装することができました。