【Nuxt.js】pagination導入編：まずは大枠を理解しよう！

# 前置き
![picture_pc_094b7d42251383e46c5e27f6fac4da99.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/d747cffd-8c3c-0a36-7b78-0d3c20ee4007.png)
ページネーションをやっていきます。
いくつかに分けて書いていきます。
今回は導入編として
どんな形でつくるかの大枠を説明🍒

いつも通り
超簡潔に説明できれば良いので
まずはこれだけ作りましょう🍀🧸
![picture_pc_14b7bf6157e97653327461fadf0fda96.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/a6a4cb84-6c12-2961-0fca-1b8ed0f4d5c0.png)


…
は？これだけ？


…
そうです👌笑

表示はこれだけですが、
導入としてこちらをやります。
**・ページ遷移のmethods
・現在いるページにclassを付与**

Let's try🌟

# Step1: dataを用意
**基本はページ番号 = 配列番号を
増やしたり減らしたり、
該当番号にクラスをつけるだけですね。**

なのでまずはdataを用意🧸
初期値はそれぞれ0です。
・now = 現在のページ
・last = 残りのページ

一応ページコンテンツとして
数字の繰り返しだけいれておきましょう。

```index.vue
<template>
 <div class="page">
   <ul>
     <li v-for="n in 5">
       {{ n }}
     </li>
   </ul>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
}
</script>
```

# Step2: methodsを用意
**【動作】**
矢印を押すとそれぞれmethodsで
Step1で用意したdataを動かしていきます。
5ページ(0~4番号)あるので、
はみ出す分はそれぞれ-1と5
はみ出したら0か4に戻します。
・now
・last
**現在のページ数を反映させるものは
実践編で解説します。**

**【methods】**
・←を押すとclickPrevNewsPage
・→を押すとclickNextNewsPage

**【式】**
三項演算を使用
式１ ? 式２ : 式３
式1がtrueなら式2、falseなら式3

```index.vue
<template>
 <div class="nav">
   <div
     class="prev"
     @click="clickPrevNewsPage()"
   >
     <svg /> // 省略
   </div>
   <ul>
     <li>
       ページ番号
     </li>
   </ul>
   <div
     class="next"
     @click="clickNextNewsPage()"
   >
     <svg /> // 省略
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
 methods: {
   clickPrevNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now - 1 < 0
       ? this.newsSection.nav.now
       : this.newsSection.nav.now - 1
   },
   clickNextNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now + 1 > this.newsSection.nav.last - 1
       ? this.newsSection.nav.now
       : this.newsSection.nav.now + 1
   },
 },
}
</script>
```

**【解説】**
**◾️clickPrevNewsPage**
　※nowが0の時は1ページ目。
**式1**
**・パターン1**
　現在1ページ(配列番号0)なら
　0 = 0 - 1 < 0
　trueなので式2を実行
**・パターン2**
　現在4ページ(配列番号3)なら
　3 = 3 - 1 < 0
　falseなので式3を実行

　**式2 true**
　　now = 0なので0番目(1ページ目)にする
　　= - 1番目(0ページ目)にはいけない
　**式3 false**
　　- 1して1ページ戻る

順番的に分かりにくいかもしれませんが要は
nowが0以上の時は - 1していって、
- 1になったら0に戻すと言うことですね。

**◾️clickNextNewsPage**
※nowが4の時は最終ページ。
**式1**
**・パターン1**
　現在5ページ(配列番号4)なら
　残り2ページ(配列番号4, 5)
　4 = 4 + 1  > 2 - 1
　2 - 1を左辺にもっていくので
　・ - 1にチェンジ
　・符号も逆向きにチェンジ
　4 - 1 =< 5
　trueなので式2を実行
・パターン2
　現在4ページ(配列番号3)なら
　残り3ページ(配列番号3, 4, 5)
　3 = 3 + 1 > 3 - 1
　3 + 2 =< 4
　falseなので式3を実行

　**式2 true**
　now = 4なので4番目(5ページ目)にする
　　= 5番目(6ページ目)にはいけない
　**式3 false**
　　+ 1して1ページ進む

複雑になってきましたが
1度理解すればテンプレとして使えますね🌟

# classを付与
1ページ目にいる時は
そこだけボーダーをつけます。
ついでにクリックしたら
該当ページに飛ぶように@clickも🍀

```index.vue
ページ表示部分を変更します。

// 変更前
   <ul>
     <li>
       ページ番号
     </li>
   </ul>

// 変更後
   <ul>
     <li
       :class="{ selected: newsSection.nav.now === 0}"
       @click="newsSection.nav.now = 0"
     >
       1
     </li>
   </ul>
```

クラス部分追加。

```index.vue
<style lang="scss" scoped>
  .nav {
     ul {
       li {
         &.selected {
           padding: 3px 5px;
           border: 1px solid #4B4B4B;
         }
       }
     }
  }
}
</style>
```

**【解説】**
**:class="{ class名: 式 }"**
クラスバインディングで
nowが0と完全一致した場合のみ
selectedクラスを付与します。
つまり0番目の1ページにいる時は
1ページだけにボーダーつけてくれます。
https://jp.vuejs.org/v2/guide/class-and-style.html
==と===の違いはこの記事が分かりやすいです！
https://www.sejuku.net/blog/23942

**@click="newsSection.nav.now = 0"**
now = 現在いるページ
0にするので0番目(1ページ目)にする

# ここまでのコード
毎度のことですが、
cssはほとんど省いております。
今回は
・ページ遷移のmethods
・現在いるページにclassを付与
でした🍒
続きは実践編などで公開します。

```index.vue
<template>
 <div class="nav">
   <div
     class="prev"
     @click="clickPrevNewsPage()"
   >
     <svg /> // 省略
   </div>
   <ul>
     <li
       :class="{ selected: newsSection.nav.now === 0}"
       @click="newsSection.nav.now = 0"
     >
       1
     </li>
   </ul>
   <div
     class="next"
     @click="clickNextNewsPage()"
   >
     <svg /> // 省略
   </div>
 </div>
</template>

<script>
export default {
 data() {
   return {
     newsSection: {
       nav: {
         now: 0,
         last: 0,
       },
     },
   }
 },
 methods: {
   clickPrevNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now - 1 < 0
       ? this.newsSection.nav.now
       : this.newsSection.nav.now - 1
   },
   clickNextNewsPage() {
     this.newsSection.nav.now = this.newsSection.nav.now + 1 > this.newsSection.nav.last - 1
       ? this.newsSection.nav.now
       : this.newsSection.nav.now + 1
   },
 },
}
</script>

<style lang="scss" scoped>
  .nav {
     ul {
       li {
         &.selected {
           padding: 3px 5px;
           border: 1px solid #4B4B4B;
         }
       }
     }
  }
}
</style>
```

**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab