はじめに

既にある書籍検索機能で、「検索」ボタンを押下した際に表示される検索結果をページネーションします。
以前の自分に教えてわかるくらいに書きたいと思います。

自己紹介

Vue.jsはこの機会にと勉強中、JSは業務で少し修正したことがある程度、HPを自分で作っていたことがあり、Javaがメインのエンジニアを名乗っています。

環境

ブラウザ：chrome

Vue.jsのバージョン

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

を使用。

参考

[Vue.js2.x]ページ番号付きのページネーション（ページナビゲーション）を実装する
https://kuroeveryday.blogspot.com/2017/10/pagination-with-vue2.html

大筋の手順

1, ローカルで同じようになるか試してみる（サンプル作成）
2, 既存画面にサンプルをそのまま埋め込む
3, サンプル部分に、検索結果を連動させる

1, ローカルで同じようになるか試してみる（サンプル作成）

参考元のコードを使用。

Vue.js

jsファイルを作る（例：main.js）
サンプルコードをそのままコピペ

HTML

HTMLファイルを作る（例：test.html）
ひな形を作ってタグの中にサンプルコードを入れる
Vue.jsを使えるように以下を入れる

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

さっき作ったJSファイルを使えるようにする

HTML

<script src="/static/main.js"></script>

↓　↓　↓　まとめると、、、

test.html

<!DOCTYPE html>
<html lang="jp">
<head>
<title>サンプル</title>
</head>
<body>
<div id="app" class="container">
  <nav>
    <ul class="pagination">
      <li class="page-item">
        <a @click="first" class="page-link" href="#">&laquo;</a>
      </li>
      <li class="page-item">
        <a @click="prev" class="page-link" href="#">&lt;</a>
      </li>

      <li
        v-for="i in displayPageRange"
        class="page-item"
        :class="{active: i-1 === currentPage}">
        <a @click="pageSelect(i)" class="page-link" href="#">{{ i }}</a>
      </li>

      <li class="page-item">
        <a @click="next" class="page-link" href="#">&gt;</a>
      </li>
      <li class="page-item">
        <a @click="last" class="page-link" href="#">&raquo;</a>
      </li>
    </ul>
  </nav>
  <ul class="list-group">
    <li v-for="item in displayItems" class="list-group-item">
      {{ item.text }}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

2, 既存画面にサンプルをそのまま埋め込む

JSファイルに埋め込む時、まるっとは埋め込めないので、種別ごとに挿入していきます。

data

var app = new Vue({
    el: '#app',
    data: {
        ・・・
    },

に該当する部分は既存ファイルにあると思います。
なので、サンプルのdata{}部分の中身を追加します。
なお、最後の変数以外は","区切りなので、忘れずに入れます。
Vue.jsではdataに入れた変数は、バインドしてくれます。

var app = new Vue({
    el: '#app',
    data: {
        ・・・,
        currentPage: 0,   // 現在のページ番号
        size: 10,         // 1ページに表示するアイテムの上限
        pageRange: 10,    // ページネーションに表示するページ数の上限
        items: []         // 表示するアイテムリスト
    },

methods、mounted、computed（フック）

dataの他にメソッドみたいのがありますが、これらはフックという名称のようです。
埋め込み先に既にある場合は、同じように考えて中身を挿入していきます。
ない場合は、","区切りに気を付けて、フックごと追加します。

HTML

表示したいところにそのまま埋め込めばOKです。

注意すること

変数名が既存システムと被らないようにする
Vue.jsのバージョンが2.X.Xでない場合は他を参照する

これでサーバーを介しても、検索結果とページネーションの部品が表示されるようになりました。

3, サンプル部分に、検索結果を連動させる

Vue.js

基本的に、変数名を変えるだけです。
data：item[]、mounted{}は使わないので削除する。

var app = new Vue({
    el: '#app',
    data: {
        ・・・,
        currentPage: 0,   // 現在のページ番号
        size: 6,          // 1ページに表示するアイテムの上限
        pageRange: 10     // ページネーションに表示するページ数の上限
    },

method{}は、<<（先頭ページ）、<（前ページ）、>（次ページ）、>>（最終ページ）の処理なのでそのまま。

computed{}

pages()：ナビゲーションバーのページ数。itemsを検索結果が入っている変数に置き換える。
displayPageRange()：pages()で求めたページ数を使い、ナビゲーションバーの始まり～終わりの数字を配列にして返す。そのままにする。
displayItems()：returnの変数名を、検索結果が入っている変数に変える。
isSelected (page)：現在のページか判定。そのまま。

HTML

基本的にそのまま。

これで検索結果がページネーションされるようになりました。

まとめ

ほぼそのまま使えます。
素晴らしいです、ありがとうございます。

感想

初投稿です。
途中2番の段階で既存システムとバージョンが合わないサンプルを使っていたので、サンプルと既存とどちらかが動かない状態になってハマったりしました。
Vue.jsは個人的にはとっつきにくい感じで、mounted{}はもう少し複雑なシステムだったら使うのかなと思いました。

参考

[Vue.js2.x]ページ番号付きのページネーション（ページナビゲーション）を実装する https://kuroeveryday.blogspot.com/2017/10/pagination-with-vue2.html

サンプルを使って既存システムにVue.jsだけで作るページネーションを埋め込んだ詳細なまとめ

はじめに

自己紹介

環境

Vue.jsのバージョン

参考

大筋の手順

1, ローカルで同じようになるか試してみる（サンプル作成）

Vue.js

HTML

2, 既存画面にサンプルをそのまま埋め込む

data

methods、mounted、computed（フック）

HTML

注意すること

3, サンプル部分に、検索結果を連動させる

Vue.js

HTML

まとめ

感想

参考