【Vue+Vuetify】Pagingについて、PagerとかPaginateとかメモ

Vueでpaginationの実装を行う際に、vuejs-paginateライブラリとかが便利だよって話。

Vue.jsでpagerを実装 - Qiita

「vuejs-paginate」を使ってページネーションを実装する | カバの樹

でも最終的にはVuetifyのPaginationを使いました。

modal（v-dialog）内でのpagingでレイアウト崩れが発生してしまいおそらく<script>周りの調整が必要でしたが、とりあえず（短絡的ですが、）簡便なVuetifyのv-pagination コンポーネントで対応しました。

<!-- v-menuの中に配置されたdialogボタンで開かれるモーダルの中身 -->
<v-dialog
 v-model="dialog"
 max-width="500px"
>
  <v-card>
    <v-card-title>
       ダイアログのタイトル
　　　　　　　　</v-card-title>
    <v-card-text>
      <v-row
        v-for="n in 5"
        :key="n"
      >
        <v-col>
          <v-btn
            class='modal'
            color="primary"
            dark
          >
            項目 {{ n }}
          </v-btn>
          <!-- 項目に対して、favorite iconでお気に入り登録 -->
          <v-btn
            icon
            v-on:click="switchFavorite">
          >
            <v-icon v-if="favoriteFlg < 0">favorite</v-icon>
            <v-icon v-else>favorite_border</v-icon>
          </v-btn>
        </v-col>
      </v-row> 
    </v-card-text>
    <v-card-actions>
      <v-col>
        <v-btn
          color="primary"
          text
          @click="dialog = false"
         >
           Close
         </v-btn>
       </v-col>
       <v-col>
       <!-- 今回の要点ここ！ -->
         <!-- v-modelには、初期表示でのpage番号を指定する -->
         <v-pagination
           v-model="1"
           :length="4"
           prev-icon="mdi-menu-left"
           next-icon="mdi-menu-right"
         ></v-pagination>
       </v-col>
     </v-row>
   </v-card-actions>            
 </v-card>
</v-dialog>

Paginationコンポーネント

v-pagination API

v-colで配置するだけで、簡単にレイアウト調整ができました。
相変わらずコードが汚くてつらい。
なんか色々書こうと思ってたけど忘れてしまった。。。