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

スクリーンショット 2021-01-05 17.41.14

実装する事

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

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

主な手順

各種インストール、導入

コード追加

簡単ですねw

前提

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

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

各種インストール、導入

npm install @mdi/js -D

npm install --save @mdi/font

つまづきポイント

上記2つの実行をせずに作業を進めてしまい、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番目の動きを一致させている形になります。

こんな感じで出来るかと思います。

まとめ

<v-app></v-app>の範囲内に記載する事

v-paginationを使えば楽に出来て、あとは各種設定を行えばオッケ〜

v-model=”page”のpageはdataと連動して値の変換にそのまま使用できる。(値がページネーション 番号に合わせて変わる)

prev-iconとnext-iconの表記をしないとsvgアイコンは表示されない(インストールも忘れずに)

難しかったのはページネーションの番号によって値を変えて行くところを自作で作った所です。こことか見れば簡単に出来たのかな?

今回はそんな感じで!

以上!

参考にしたサイトページネーション・コンポーネントページネーションコンポーネントは、ユーザーが情報を容易に利用できるように、長いデータセットを分離するために使用されます。vuetifyjs.com

IconsVuetifyは、プリフィックスとグローバルオプションを使用して、Material Design Icons、Font avuetifyjs.com