35 lines
833 B
Vue
35 lines
833 B
Vue
<template>
|
|
<div class="pagination">
|
|
<button @click="gotoPage(0)">First</button>
|
|
<button @click="gotoPage(page - 1)">Previous</button>
|
|
<button class="unselectable">{{ page + 1 }} / {{ maxPages }}</button>
|
|
<button @click="gotoPage(page + 1)">Next</button>
|
|
<button @click="gotoPage(maxPages)">Last</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
page: Number,
|
|
itemsPerPage: Number,
|
|
maxPages: Number,
|
|
},
|
|
methods: {
|
|
gotoPage(page) {
|
|
if (page < 0) {
|
|
page = 0;
|
|
}
|
|
|
|
if (page >= this.maxPages) {
|
|
page = this.maxPages - 1;
|
|
}
|
|
|
|
if (page !== this.page) {
|
|
this.$emit('update:page', page);
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|