Skip to content

Instantly share code, notes, and snippets.

@victorwpbastos
Created July 5, 2016 16:22
Show Gist options
  • Save victorwpbastos/4d3006cf2f8ac0c784222ecc43cb4a23 to your computer and use it in GitHub Desktop.
Save victorwpbastos/4d3006cf2f8ac0c784222ecc43cb4a23 to your computer and use it in GitHub Desktop.
Vue Paginator Component
<template>
<div class="columns">
<div class="column col-4">
<select class="form-select" @change="changePerPage" v-model="itemsPerPage" number>
<option v-for="p in perPage" track-by="$index" value="{{p}}">{{p}} REGISTROS POR PÁGINA</option>
</select>
</div>
<div class="column col-4 text-center">
<p style="margin:7px;">PÁGINA {{currentPage}} DE {{totalPages}}</p>
</div>
<div class="column col-4">
<div class="btn-group float-right">
<button type="button" class="btn" @click="prev()" :disabled="currentPage === 1">Anterior</button>
<button type="button" class="btn" @click="next()" :disabled="currentPage === totalPages">Próximo</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['currentPage', 'totalPages', 'perPage'],
data() {
return {
itemsPerPage: 10
}
},
methods: {
prev() {
this.currentPage--;
this.$dispatch('paginate', {page: this.currentPage});
},
next() {
this.currentPage++;
this.$dispatch('paginate', {page: this.currentPage});
},
changePerPage() {
this.$dispatch('paginate', {page: this.currentPage, itens_per_page: this.itemsPerPage});
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment