Vue.jsでVuetifyを使ってページネーションを実装してみた

2021.04.22

投稿一覧ページでページネーションを実装する際にvuetifyを使ってみたところ少しハマったので備忘録として残しておきます。

実装する事

vuetifyを使用したページネーションの実装

クリックすると表示内容も変化する

主な手順

各種インストール、導入

コード追加

簡単ですねw

前提

一覧表示機能が出来ている。今回はitemsが取得できている前提で進めています。

vuetifyの導入は終わっている。

各種インストール、導入

npm install @mdi/js -D

npm install --save @mdi/font

つまづきポイント

上記２つの実行をせずに作業を進めてしまい、svgアイコンが表示されない形になってしまいました。インストールを忘れずに。

インストール関連詳しくはこちら

コード追加

<div v-for="item in pagination(items, page)" :key="item.id">  10-1
         {{item.title}}
</div>

。。省略

<div v-if="items">
<v-app>                 1
 <div class="text-center">
   <v-pagination         2
     v-model="page"         3
     :length="pagenate_length(items)"     4
     prev-icon="mdi-menu-left"          5
     next-icon="mdi-menu-right"
   ></v-pagination>
 </div>
</v-app>
</div>

..中略

data() {
   return {
     items: [],
     page: 1                6
   }
}

。。中略
methods: {
7　pagenate_length(items) {
     function chunk(arr, size) {
8      return arr.reduce(
         (newarr, _, i) => (i % size ? newarr : [...newarr, arr.slice(i, i + size)]),
         []
       )
     }
9    return chunk(items, 2).length
   },
10 pagination() {
     if(this.items != undefined) {
         function chunk(arr, size) {
           return arr.reduce(
             (newarr, _, i) => (i % size ? newarr : [...newarr, arr.slice(i, i + size)]),
             []
           )
         }
11       return chunk(this.items, 2)[this.page - 1]
       }
   }
}

1, vuetifyの要素がかける範囲がこれに囲まれている範囲です。v-appの以外例えばbladeとかではvuetifyは使えません。

2, vuetifyに用意されているpaginationコンポーネントを呼び出します。

3, モデルでpageと同期させています。現在のページを取得、扱うことが可能になります。

4, ページネーションの表示の数です。メソッドを呼び出して返り値を表示する形にしています。

5, prev-iconとnext-iconはページネーションのsvgアイコンの役割を担っています。各種インストールが必要だったりするので注意です。

6, dataに先ほど出てきたpageを初期値と共にセットします。

7, 先ほど4で出てきたメソッドになります。引数にitemsを持っています。返り値はchunkメソッドの返り値になります。

8, この部分の式についてはこちらを参考にしました。

9, chunkメソッドを呼び出して行なっていることは、itemsを2つずつ分けて配列にしていきます。.lengthとしているので最終的に配列が何個出来ているのかを返り値としています。

10, paginationメソッドではthis.itemsがundefinedではない時に処理が発火するようになっています。

10-1 v-forで回している配列が10で書いたメソッドの返り値に対してになっています。

11, chunk自体の処理は変わりませんが、[this.page – 1]を付け加えて、表示する値を設定しています。具体的には配列の0番目とページネーションの1番目の動きを一致させている形になります。