簡単にページネーションを作れるVue/VuetifyのPaginationを使ってみます。Laravel側からAxiosを使ってAPIでデータを取得し、Vuetify/SimpleTablesで一覧表示させてそのページネーションとしてVuetify/Paginationを配置。URLはそのまま変わらないのでVue側のJavascriptでURLの書き換え、スクロールバーがある場合はページトップへの移動を行います。簡単にページネーションを作れるVue/VuetifyのPagination。Vuetify公式サイトのページネーション(https://vuetifyjs.com/ja/components/paginations/)で基本的な設定は以下のようなものです。}</script>v-modelとしてのpageは現在ページを示し、lengthは最終ページを設定します。LaravelのAPI側からは最終ページ(last_page)だけあればページネーションは完成ですね!プロパティとしては他にもtotal-visible:ページ要素の最大数:ページ要素数は自動的に決定されますが、あまり増やしたくない場合に使用します。prev-icon:「前へ」のアイコンを設定することができます。next-icon:「次へ」のアイコンを設定することができます。circle:要素を円形にします。color:色を設定できます。イベントとしてはinput:現在のページが変更されたときページ番号を返しますnext:「次へ」がクリックされたときprevious:「前へ」がクリックされたときLaravel側の各種設定APIで都道府県の番号と名前を返すだけのシンプルなアプリケーションを作成します。}}1ページ当たりの件数は適宜変更してください。アクセスすると以下のような結果を返します。}}ルートの設定APIでアクセスするのでapi.phpに設定します。アクセスできるようにします。</div></body></html>PrefListComponent.vueSimpleTableで都道府県リスト一覧を表示させて、その下にPaginationを設置します。></v-pagination>URL書き換え、ページトップへの移動ページ移動しても同じコンポーネント内でデータが変わるだけなのでURLは変わりません。?page=**というクエリストリングを追加したURLに変更してあげましょう。URLだけを変更しています。関連記事PHPフレームワークLaravel5.6でCRUD~UPDATE&DELETE編2018-09-04[CodeIgniter3]ページネーション2018-07-28[CodeIgniter3]メール2018-07-29PHPでTwitterAPIを使ってみる2019-08-02[Codeigniter3]mPDFを使う2018-07-30PHPフレームワークLaravel5.6でCRUD~READ編2018-09-03Author1109奈良県在住のWEB系エンジニア?PHP+MySQL等のWEBシステム開発をかれこれ15年。WEBのご相談承ります。お気軽にお問い合わせください。WEBxREAL.閉じる。