ライブラリ目次vuejs-paginateとは検証環境インストール導入手順プロパティフィルター付きのリストを作るブラウザバックしてもページネーションを維持させるまとめvuejs-paginateとは「vuejs-paginate」は、ページネーションを実装するライブラリです。シンプルなAPIで提供されており、容易に実装することができます。CSSによってページネーションコンポーネントのスタイルをカスタマイズすることができます。2.6.0vuejs-paginate2.1.0インストール以下のnpm、CDNを使ってインストールします。protected]"></script>gitリポジトリは以下から取得できます。https://github.com/lokyoung/vuejs-paginate導入手順Bootstrapベースのページネーションを実装します。※モジュール版は未検証です。VuejsPaginate)ページネーションメソッドを設定parPageに1ページに表示するアイテム数を設定し、getPageCountで最大のページ数を求めています。})設定内用は以下になります。</paginate></div>Bootstrapのスタイルを適用vuejs-paginateには、デフォルトのスタイルがありません。今回はサンプルでBootstrapのスタイルを適用します。デフォルト:3(注:アクティブページの前後に同じ数のページが表示されるように、奇数を使用することをお勧めします。偶数を使用すると、現在のページの後よりもアクティブページの前に1つ多いページ番号があります。前のボタンのテキスト。ここでHTMLを使うことができます。次のボタンのテキスト。ここでHTMLを使うことができます。ブレークビューインジケーターのテキスト。選択した最初のページのインデックス。上書きされた選択ページのページ番号。ページがクリックされたときに呼び出すメソッド。クリックしたページ番号をパラメータとして使用してください。レイアウトのCSSクラス名。各ページ要素のタグliのCSSクラス名。各ページ要素のタグaのCSSクラス名。前の要素のタグliのCSSクラス名。前の要素のタグaのCSSクラス名。次の要素のタグliのCSSクラス名。次の要素のタグaのCSSクラス名。breakビュー要素のタグliのCSSクラス名。breakビュー要素のCSSクラス名。アクティブページ要素のCSSクラス名。無効なページ要素のCSSクラス名。タグを囲むliタグをサポートしない。最初と最後のページをめくるためのサポートボタン。(first-last-buttonがfalseの場合は表示されません。ここでHTMLを使用できます。(first-last-buttonがfalseの場合は表示されません。ここでHTMLを使用できます。前のページまたは次のページがない場合は、前/次ボタンを隠します。falseフィルター付きのリストを作るフィルター付きリストにページネーションを付けるにはどうしたら良いだろう?そう思ったら下記の記事を参考にしてください。Vue.jsでフィルター機能付きのテーブルにページネーションを付ける方法ブラウザバックしてもページネーションを維持させる管理画面を作っていると良くあるのですが、記事の更新してブラウザバックで一覧ページに戻った時に、ページネーションが解除されてしまう現象。これを解決するために以下の記事を書きました。ブラウザバックしてもページネーションを維持させる方法まとめページネーションを実装するライブラリでした。非常に直感的でシンプルにAPIがまとめられていたので、サンプルを作るのも苦労無く行えました。テーブル系のライブラリを使う時以外のページネーションは、これを使えば良さそうですね。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。