Vue.js Pagination Component

Pagination.vue

<template>
<nav>
  <ul class="pagination" @click="handleClick($event)">
    <li v-if="no > 1">
      <a :href="hrefPrefix + (no - 1)" :data-page="no - 1">&lt;</a>
    </li>
    <li v-for="i in pageIndicatorSeries" :class="{active: i === no}">
      <a :href="hrefPrefix + i" :data-page="i">{{ i }}</a>
    </li>
    <li v-if="no < pageCount">
      <a :href="hrefPrefix + (no + 1)" :data-page="no + 1">&gt;</a>
    </li>
  </ul>
</nav>
</template>

<script>

// even num
const PAGE_INDICATOR_NUMBER = 4

export default {
  name: 'pagination',
  props: {
    size: {
      type: Number
    },
    no: {
      type: Number
    },
    total: {
      type: Number
    },
    trigger: {
      type: String,
      default: 'jump'
    },
    hrefPrefix: {
      type: String,
      default: ''
    }
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.size)
    },
    pageIndicatorSeries() {
      let startPage = Math.max(1, this.no - PAGE_INDICATOR_NUMBER / 2)
      let endPage = startPage + PAGE_INDICATOR_NUMBER
      if (endPage >= this.pageCount) {
        endPage = this.pageCount
        startPage = Math.max(1, endPage - PAGE_INDICATOR_NUMBER)
      }
      let series = []
      for (let i = startPage; i <= endPage; ++i) {
        series.push(i)
      }
      return series
    }
  },
  methods: {
    handleClick(evt) {
      if (this.trigger !== 'jump') {
        evt.preventDefault()
        this.$emit('jump', parseInt(evt.target.dataset.page, 10))
      }
    }
  }
}
</script>