Help us understand the problem. What is going on with this article?

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

前置き

picture_pc_094b7d42251383e46c5e27f6fac4da99.png
ページネーションをやっていきます。
いくつかに分けて書いていきます。
今回は導入編として
どんな形でつくるかの大枠を説明🍒

いつも通り
超簡潔に説明できれば良いので
まずはこれだけ作りましょう🍀🧸
picture_pc_14b7bf6157e97653327461fadf0fda96.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 ? 式2 : 式3
式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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away