Pagination.vue

<template>
	<div class="text-center" v-if="arrayLength > pageSize">
		<button
			class="btn btn-secondary"
			:class="{
				'opacity-25': currentPage == 1
			}"
			@click="prevPage"
			:disabled="currentPage == 1">
			⟨
		</button>
		<span class="small px-2"
			>{{ currentPage }} / {{ Math.ceil(arrayLength / pageSize) }}</span
		>
		<button
			class="btn btn-secondary"
			:class="{
				'opacity-25': currentPage * pageSize >= arrayLength
			}"
			@click="nextPage"
			:disabled="currentPage * pageSize >= arrayLength">
			⟩
		</button>
	</div>
</template>

<script>
export default {
	props: {
		currentPage: {
			type: Number,
			required: true
		},
		pageSize: {
			type: Number,
			required: true
		},
		arrayLength: {
			type: Number,
			required: true
		}
	},
	methods: {
		nextPage: function () {
			if (this.currentPage * this.pageSize < this.arrayLength)
				this.$emit("update:currentPage", this.currentPage + 1)
		},
		prevPage: function () {
			if (this.currentPage > 1)
				this.$emit("update:currentPage", this.currentPage - 1)
		}
	}
}
</script>