vue.jsの理解を深めるためページネーション実装してみた ※2.x系

多分これが一番簡単と思います

内容を簡単に説明

機能

• リスト追加
• リスト削除
• ページング

data

• list
  • すべてのオブジェクトを格納
• name
  • formの入力データを格納
• currentPage
  • 現在表示しているページ

computed

• getSmallList
  • listから現在ページの要素を抽出
  • 表示対象のみ抽出
• isMaxPage
  • 現在ページが最大ページか判定
  • 最大ページなら「次へ」を押せなくする
    1. 最初は全1ページ中1ページ目なのでtrue
    2. listにaddして全体のページが2ページになれば、そのタイミングでfalse
    3. 2ページ目に移動するとcurrentPageがインクリメントされ、そのタイミングでtrue
• computedで定義するとメソッド内で使用している要素に変更があったら勝手に再計算が走る！！
  • getSmallListはlistに変更があった際に自動で更新される
    • listにaddしたときや削除したときに、getSmallListも再計算されるので画面の内容が変わる！
  • isMaxPageは listに変更があった際or現在ページに変更があった際に自動で更新される

methods

• destroy
  • listから一番後ろの要素削除（削除ボタン押したとき）
• addObj
  • listの最後にnameの内容を格納（formがsubmitされたとき）
• nextPage
  • 次のページへ移動（次へボタン）
• prePage
  • 前のページへ移動（前へボタン）

気をつけるところ

• 最初は「次へ」ボタン、「前へ」ボタンをなんとなくaタグにしていた
• aタグだとdiabledが効かない。（cssでdisableクラスを作るなどする必要がある。。）

結論

• vue.jsだと簡単に実装できた！