ページネーション【Vue.js/Vuetify】

概要

・　ポートフォリオでページネーション機能を実装したので、コメントつきのソースコードを紹介
・　使用した技術はRealtimeDatabase（Firebase）とVuetify（Vue.js）
　　※ v-pagenation のページは　https://vuetifyjs.com/ja/components/paginations/
・　api経由でデータを取得し、ページネーション付きで表示する
・　開発環境はVue-Cli

template

<v-layout>
     <v-flex>
          <v-pagination
                  v-model="currentPage"
                  :length="getPageCount">
          </v-pagination>
     </v-flex>
</v-layout>
<v-layout v-for="list in getLists" :key="list.message">
//以下省略
</v-layout>

:length は画面に表示できる最大限のページ数のこと。

script

data(){
      return {
         input: '',
         parPage:3, //1ページごとに表示されるリスト数
         currentPage:1 //画面を開いた時に最初にあなたがいるページの場所
      }
    },
computed(){
  lists(){//　表示するリストのデータ
     return this.$store.state.lists
    },
  getLists(){// 表示するリストを１ページ３つにする
      let current = this.currentPage * this.parPage //全ページlistの合計数
      let start = current - this.parPage //1ページ目のlistの数
      return this.lists.slice(start, current) //リストの何番目〜何番目を今のページに表示するか
     },
  getPageCount(){
         //引数として与えた数以上の最小の整数を返す
         //ページ数になって、上の:lengthに当てはめる
       return Math.ceil(this.lists.length / this.parPage)
     }
},
watch:{
   search(){//1ページ目以外のページにいる状態で検索欄に文字入力すると、１ページ目に戻って検索
     this.currentPage = 1
  }
}