Vue.js(Nuxt.js)ですごい安易で簡単なもっと見るボタンの作成

Vue.js(Nuxt.js)でもっと見るボタンの作成した

Demo

もっと見るボタンとは

Googleを例にするとモバイル版で検索をかけた際に、10コンテンツ以上みるために押すボタン

記事一覧の取得に使ったりする。

安易なもっと見るボタン

通常ならもっと見るを押したときにajaxなどを使ってサーバーからデータをもってくるんだが、今回は最初にデータを全て取得した状態でのもっと見るボタンを作成した。

制作例

今回は下記のjsonを使う

{
  "prefectures": [
    { "id": 0, "slug": "hokaidou", "value": "北海道" },
    { "id": 1, "slug": "aomori", "value": "青森県" },
    { "id": 2, "slug": "akita", "value": "秋田県" },
    { "id": 3, "slug": "yamagata", "value": "山形県" },
    { "id": 4, "slug": "iwate", "value": "岩手県" },
    { "id": 5, "slug": "miyagi", "value": "宮城県" },
    { "id": 6, "slug": "fukushima", "value": "福島県" },
    { "id": 7, "slug": "ibaraki", "value": "茨城県" },
    { "id": 8, "slug": "tochigi", "value": "栃木県" },
    { "id": 9, "slug": "gunma", "value": "群馬県" },
    { "id": 10, "slug": "saitama", "value": "埼玉県" },
    { "id": 11, "slug": "chiba", "value": "千葉県" },
    { "id": 12, "slug": "tokyos", "value": "東京都" },
    { "id": 13, "slug": "kanagawas", "value": "神奈川県" },
    { "id": 14, "slug": "nigata", "value": "新潟県" },
    { "id": 15, "slug": "yamanashi", "value": "山梨県" },
    { "id": 16, "slug": "nagano", "value": "長野県" },
    { "id": 17, "slug": "toyama", "value": "富山県" },
    { "id": 18, "slug": "ishikawa", "value": "石川県" },
    { "id": 19, "slug": "fukui", "value": "福井県" },
    { "id": 20, "slug": "gifu", "value": "岐阜県" },
    { "id": 21, "slug": "shizuoka", "value": "静岡県" },
    { "id": 22, "slug": "aichi", "value": "愛知県" },
    { "id": 23, "slug": "mie", "value": "三重県" },
    { "id": 24, "slug": "shiga", "value": "滋賀県" },
    { "id": 25, "slug": "kyoto", "value": "京都府" },
    { "id": 26, "slug": "osaka", "value": "大阪府" },
    { "id": 27, "slug": "hyogo", "value": "兵庫県" },
    { "id": 28, "slug": "nara", "value": "奈良県" },
    { "id": 29, "slug": "wakayama", "value": "和歌山県" },
    { "id": 30, "slug": "shimane", "value": "島根県" },
    { "id": 31, "slug": "tottori", "value": "鳥取県" },
    { "id": 32, "slug": "okayama", "value": "岡山県" },
    { "id": 33, "slug": "hiroshima", "value": "広島県" },
    { "id": 34, "slug": "yamaguchi", "value": "山口県" },
    { "id": 35, "slug": "tokushima", "value": "徳島県" },
    { "id": 36, "slug": "kagawa", "value": "香川県" },
    { "id": 37, "slug": "ehime", "value": "愛媛県" },
    { "id": 38, "slug": "kouchi", "value": "高知県" },
    { "id": 39, "slug": "fukuoka", "value": "福岡県" },
    { "id": 40, "slug": "saga", "value": "佐賀県" },
    { "id": 41, "slug": "nagasaki", "value": "長崎県" },
    { "id": 42, "slug": "kumamoto", "value": "熊本県" },
    { "id": 43, "slug": "oita", "value": "大分県" },
    { "id": 44, "slug": "miyazaki", "value": "宮崎県" },
    { "id": 45, "slug": "kagoshima", "value": "鹿児島県" },
    { "id": 46, "slug": "okinawa", "value": "沖縄県" }
  ]
}

これをループで描写

<template>
  <div>
    <ul>
      <li
        v-for="prefecture in ListItems"
        :key="prefecture.id"
      >
        {{ prefecture.value }}
      </li>
    </ul>
    <button
      v-if="(ListItems.length - count) >= 0"
      class="st-motto st-button medium-button blue"
      type="button"
      @click="isMore"
    >
      もっとみる
    </button>
  </div>
</template>

<script>
import sampleJson from '~/static/prefecture.json'
export default {
  data () {
    return {
      prefectures: sampleJson.prefectures,
      count: 20
    }
  },
  computed: {
    ListItems() {
      const list = this.prefectures
      return list.slice(0, this.count)
    }
  },
  methods: {
    isMore() {
      this.count += 10
    }
  }
}
</script>

やっていること

• dataプロパティでcountを設定これは表示する数
• computedで配列を0からcount数まで切り取りする
• 切り取ったものをv-forで回し描写
• 取得数をcountで引いてが0またはそれ以下になったときにボタンを非表示
• ボタンを押すとcountに10足す

ローディングいれてないけどこれでもっと見るボタンが完成。

まとめ

データベースからの取得数が少なかったりする場合は結構使えると思う。