Pagination.vue

<template>
<div v-on:paginationModifyPage="changePageNumberToCurrent">
    <ul class="pagination">

      <li class="page-item">
          <a v-if="paginationData.current_page > 1"
            class="page-link"
            href="javascript:void(0)" 
            aria-label="Previous" 
            v-on:click.prevent="changePageNumberToCurrent(paginationData.current_page - 1)"
          >
            <span aria-hidden="true">«</span>
          </a>

          <a 
            v-else class="page-link" 
            aria-label="Previous" 
          >
            <span aria-hidden="true">«</span>
          </a>
          
      </li>
    <li class="page-item" 
          v-for="(page,arrayIndex) in pageNumberBuilder" 
          :class="{'active': page == paginationData.current_page}" 
          :key="arrayIndex">

        <a v-if="page !== ellipsisString" class="page-link"  href="javascript:void(0)" v-on:click.prevent="changePageNumberToCurrent(page)">{{ page }}</a>
        <a v-else class="page-link"  href="javascript:void(0)" disabled>{{ page }}</a>
        </li>
    <li class="page-item">
        <a 
          class="page-link" 
          href="javascript:void(0)" 
          aria-label="Next" 
          v-on:click.prevent="changePageNumberToCurrent(paginationData.current_page + 1)"
          v-if="paginationData.current_page < paginationData.last_page"
        >
          <span aria-hidden="true">»</span>
        </a>

        <a 
            v-else class="page-link" 
            aria-label="Previous" 
          >
            <span aria-hidden="true">»</span>
          </a>

        </li>
    </ul>
    </div>
</template>

<script>
export default {
props : {

    paginationData:{
        type : Object,
        required:true,
        },

    offset: {
          type: Number,
          default: 10
      },

    ellipsisString : {
      type: String,
          default: '...',
    },

    },
    computed:{
      
        pageNumberBuilder() {
        if (!this.paginationData.to) {
          return [];
        }
        var ellipsisString = this.ellipsisString;
        var pagesArray = [];

        if (this.paginationData.last_page <= 1) {
            return array();
        }

        if (this.paginationData.last_page <= this.offset) {

            for (var i = 1; i <= this.paginationData.last_page; i++) {
                // $pages[] = $this->createPage($i, $i == this.paginationData.current_page);
                pagesArray.push(i);
            }
        } else {
            // Determine the sliding range, centered around the current page.
            var numAdjacents = Math.floor((this.offset - 3) / 2);
            if (this.paginationData.current_page + numAdjacents > this.paginationData.last_page) {
                var slidingStart = this.paginationData.last_page - this.offset + 2;
            } else {
                 var slidingStart = this.paginationData.current_page - numAdjacents;
            }
            if (slidingStart < 2){
                slidingStart = 2;
            } 
            var slidingEnd = slidingStart + this.offset - 3;

            if (slidingEnd >= this.paginationData.last_page){
              slidingEnd = this.paginationData.last_page - 1;
            } 
            // Build the list of pages.
            // $pages[] = $this->createPage(1, this.paginationData.current_page == 1);
            pagesArray.push(1);
            if (slidingStart > 2) {
                // $pages[] = $this->createPageEllipsis();
                pagesArray.push(ellipsisString);
            }
            for (var i = slidingStart; i <= slidingEnd; i++) {
                // $pages[] = $this->createPage($i, $i == this.paginationData.current_page);
                pagesArray.push(i);
            }
            if (slidingEnd < this.paginationData.last_page - 1) {
                // $pages[] = $this->createPageEllipsis();
                pagesArray.push(ellipsisString);
            }
            pagesArray.push(this.paginationData.last_page);
            // $pages[] = $this->createPage(this.paginationData.last_page, this.paginationData.current_page == this.paginationData.last_page);
        }

        // var paginationStartingFrom = this.paginationData.current_page - this.offset;

        // if (paginationStartingFrom < 1) {
        //   paginationStartingFrom = 1;
        // }
        
        // var paginationEndingOn = paginationStartingFrom + (this.offset * 2);
        // if (paginationEndingOn >= this.paginationData.last_page) {
        //   paginationEndingOn = this.paginationData.last_page;
        // }

        // var pagesArray = [];

        // for (var page = paginationStartingFrom; page <= paginationEndingOn; page++) {
        //     pagesArray.push(page);
        //   }
          return pagesArray;
      }
    },
  methods : {
      changePageNumberToCurrent(clickedPageNumber) {
        this.$emit('paginationModifyPage',clickedPageNumber);
      }
    }
}
</script>