pagination.vue

<template>
  <div class="mt-4" v-if="pagination.total_pages > 1">
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"
            @click="onPaginate(pagination.current_page - 1)"
        >
          <a class="page-link" href="#" aria-label="Previous"
             :class="{'disabled-pagination-link': pagination.current_page === 1}"
          >
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <li class="page-item"
            v-for="page in totalPage"
            :class="{active: pagination.current_page === page}"
            :disabled="pagination.current_page === page"
        >
          <a class="page-link"
             href="#"
             @click="onPaginate(page)"
             :class="{'disabled-pagination-link': pagination.current_page === page}"
          >{{ page }}</a>
        </li>
        <li class="page-item"
            :class="{'disabled-pagination-link': pagination.current_page === pagination.total_pages}"
        >
          <a class="page-link"
             href="#"
             aria-label="Next"
             @click="onPaginate(pagination.current_page + 1)"

          >
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
  export default {
    name: 'pagination',
    props: {
      pagination: {
        type: Object,
        required: true,
      }
    },
    data () {
      return {
        pages: [],
      }
    },
    mounted () {

    },
    computed: {
      totalPage () {
        let pages = []
        for (let i = 1; i <= this.pagination.total_pages; i++) {
          pages.push(i)
        }
        return pages
      }
    },
    methods: {
      onPaginate (page) {
        this.$emit('paginate', page)
      }
    }
  }
</script>

<style scoped>
  .disabled-pagination-link {
    pointer-events: none;
  }
</style>