【ページネーション編】WP REST APIで投稿を非同期で全件取得した話

<template>
  <div class="my-post-archive">
    <article class="archive" v-if="datas">...</article>
    <pagination
      v-if="paginationShow"
      :totalPosts="totalPosts"
      :perPage="perPage"
      :pager="pager"
      :pagerVisible="pagerVisible"
      :pagerScroll="pagerScroll"
    />
  </div>
</template>

<style lang="scss" scoped>...</style>

<script>
  import axios from 'axios'
  import pagination from './pagination.vue'
  export default {
    props: {
      postFetchUrl: {
        type: String,
        require: true
      },
      postQuery: {
        type: Object,
        default: () => ({
          '_embed': '', // アイキャッチ情報の取得
        })
      },
      perPage: {
        type: Number,
        default: 10,
      },
      /* pagination ------------------------------------------------- */
      pagerVisible: {
        type: Number,
        default: 5,
      },
      pagerScroll: {
        type: Number,
        default: 1,
      },
      paginationShow: {
        type: Boolean,
        default: true,
      },
    },
    components: {
      pagination,
    },
  ...

<template>
  <div class="pagination">
    <ul class="pagination__list">
      <li class="pagination__item">
        <span class="pagination__item--perv">prev</span>
      </li>
      <li class="pagination__item">
        <span class="pagination__item--num">1</span>
        <span class="pagination__item--num">2</span>
        <span class="pagination__item--num">3</span>
      </li>
      <li class="pagination__item">
        <span class="pagination__item--next">next</span>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
</style>
<script>
  export default {
    props: {
      totalPosts: {
        type: Number,
      },
      perPage: {
        type: Number,
      },
      pager: {
        type: Number,
      },
      pagerVisible: {
        type: Number,
      },
      pagerScroll: {
        type: Number,
      },
    },
    data() {
      return {
        showPage: [],
      }
    },
  }
</script>

<div id="archive">
  <archive
    :post-fetch-url="'/wp-json/wp/v2/posts'"
    :per-page="10"
    :post-query="{
      '_fields': 'id,content,title,categories,_links,_embedded',
      '_embed': '',
    }"
    :pager-visible="5"
    :pager-scroll="1"
    :pagination-show="true"
    #post="{ data }"
  >
    <span v-text="data.id"></span>
  </archive>
</div>

computed: {
  maxPage() {
    return Math.ceil(this.totalPosts / this.perPage)
  },
}

<template>
  <div class="pagination" v-if="maxPage">
    ...

changePager(num) {
  this.pager = num
},

<template>
  <div class="my-post-archive">
    ...
    <pagination
      ...
      @changePage="changePager"
    />

sendPager(num) {
  this.$emit('changePage', num)
}

datas() {
  // paginationを表示する場合
  if(this.paginationShow !== false) {
    const start = (this.pager - 1) * this.perPage
    const end = start + this.perPage
    return this.dataBase.slice(start, end)
  
  // paginationを表示しない場合
  } else {
    return this.dataBase
}

async getPostDatas() {
  // ページネーションを表示する場合
  if(this.paginationShow === true) {
    await this.getPostInfo()
    const numPostAry = [...Array(this.totalPages).keys()].map( i => ++i )
    for (let num of numPostAry) {
      await this.getPostData(num)
    }
  
  // ページネーションを表示しない場合
  } else {
    await this.getPostData(false)
  }
},

pagerDefault() {
  this.sendPager(1)
  if(this.maxPage <= this.pagerVisible) {
    this.showPage = [...Array(this.maxPage).keys()].map( i => ++i)
  } else {
    this.showPage = [...Array(this.pagerVisible).keys()].map( i => ++i)
  }
},

...
  <span class="pagination__item--perv">prev</span>
</li>
<li class="pagination__item" v-for="num of showPage" :key="num">
  <span
    class="pagination__item--num"
    :class="{ 'pagination__item--current' : num == pager}"
    v-text="num"
    @click="sendPager(num)" />
</li>
<li class="pagination__item">
  <span class="pager__item--next">next</span>
...

goNext() {
  // 最大ページ数の配列化
  const maxPageAry  = [...Array(this.maxPage).keys()].map( i => ++i)
  
  // 現状表示されているpagerの最大値取得
  const showPageMax = this.showPage.slice(-1)[0]
  
  // next時の最終の値を取得
  let end = showPageMax + this.pagerScroll
  
  // 最終値と最大ページ数を比較して最初の値を修正
  end         = end > this.maxPage ? this.maxPage : end
  const start = end - this.pagerVisible
  
  // 表示に反映
  this.showPage = maxPageAry.slice(start, end)
  this.sendPager(start + 1)
},

<span class="pagination__item--next" @click="goNext()">next</span>

goPrev() {
  // 最大ページ数の配列化
  const maxPageAry = [...Array(this.maxPage).keys()].map( i => ++i)
  
  // 現状表示されているpagerの最小値取得
  const showPageMin = this.showPage.slice(0)[0]
  
  // prev時の最初の値を取得
  let start = showPageMin - this.pagerScroll - 1
  
  // 最小値とstartの値を比較して最初の値を修正
  start = 0 >= start ? 0 : start
  const end = start + this.pagerVisible
  
  // 表示に反映
  this.showPage = maxPageAry.slice(start, end)
  this.sendPager(end)
},

<span class="pagination__item--prev" @click="goPrev()">prev</span>

// nextの不要判定
hideNext() {
  return this.showPage.slice(-1)[0] == this.maxPage
},
// prevの不要判定
hidePrev() {
  return this.showPage.slice(0)[0] == 1
},

<span class="pagination__item--perv" :class="{ 'pagination__item--hidden' : hidePrev()}" @click="goPrev()">prev</span>

<span class="pagination__item--next" :class="{ 'pagination__item--hidden' : hideNext()}" @click="goNext()">next</span>

.pagination {
  border-top: 2px solid #eee;
  margin-top: 1rem;
  padding-top: 1rem;
  &__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  &__item {
    span {
      display: inline-block;
      text-align: center;
      cursor: pointer;
    }
    &--num {
      width: 2rem;
    }
    &--current {
      color: #f00;
    }
    &--hidden {
      visibility: hidden;
    }
    &--perv,
    &--next {
      width: auto;
    }
  }
}