Vue.jsを使用している中でVue.jsだけでページナビゲーション（ページネーション）の処理を作りたいと思いました。
上記ページを参考にページングの処理を作成したのですが、Vue.jsのバージョンの違いなのかうまく動作しない所があったり、1ページのみのデータしかない際にも10ページ分のページナビゲーションが表示されてしまったりなどがあったため、上記のページを参考にページナビゲーションの処理を作り直してみました。
Vue.jsのバージョンは、2.5.2です。
ページナビゲーションのソース
ページナビゲーションの実際の動作
実際のページングの処理の動作は、下記のようになります。dataの中身を変えていただけると、1ページのみの表示や7ページのみの表示の時などの動作を試すことが出来ます。
実際の処理の説明
pageに現在のページ番号を保持しているので、$indexとpageが同じなら、classにactiveを、それ以外なら何も設定しないようにしている。
ページ番号をクリックしたときは、現在のページ番号を$indexで書き換えているだけ。
最初のページ、最後のページも同様。
「最初のページに移動」なら、現在のページ番号を0に書き換える。
「最後のページに移動」なら、現在のページ番号をページ数で書き換える。
Vue.jsでページ番号付きのページネーションをつくる
基本的なページングの処理は、参考にさせていただいたページの処理と変わりません。
Vue.jsのバージョンの違いなのかエラーが表示されてしまう所は、修正いたしました。
ページ番号のつけ方に関しては、v-repeatではなくv-forを使用したり若干修正しました。
また、大きな変更点としては、computedにneighborPagesのメソッドを追加したことです。
このneighborPagesは、データが1ページ分しかない際にも10ページ分のページが表示されてしまうなどの不具合の解消のために作成しました。
ちょとわかりずらいロジックになってしまっているので、はじめにページングするページ数などを計算するなど、もっといいロジックがあると思います。
もし、Vue.jsでページング処理を作成しようとしている人の参考になれば幸いです。
本当は、ページごとに非同期でDBから必要なデータのみを取り出すと良いのでしょうね。