Skip to content

Instantly share code, notes, and snippets.

@ekrist1 ekrist1/Instruction
Created Oct 1, 2017

Embed
What would you like to do?
Laravel Vue Bulma pagination component
Add eventHub to your app.js file:
Vue.prototype.$eventHub = new Vue();
In your controller:
Generate a new resource-class (pagination metadata is included in the response)
https://laravel.com/docs/5.5/eloquent-resources
How to use the child-component in your vue-file:
<template>
<pagination :meta="meta" :links="links" instance="contactlist"></pagination>
...
</template>
import Pagination from './utilities/Pagination.vue';
export default {
components: { Pagination },
mounted() {
this.getContacts();
this.$eventHub.$on('contactlist.switchPage', this.submitData)
},
methods: {
submitData (page) {
this.$http.get('/contacts?page=' + page).then((response) => {
this.contacts = response.body.data
this.meta = response.body.meta
this.links = response.body.links
})
},
getContacts: {
....
this.submitData(1)
}
},
<template>
<div class="column">
<div class="columns">
<nav class="pagination is-centered" v-if="lastpage > 1">
<a class="pagination-previous" @click.prevent="changePage(meta.current_page - 1)" v-bind:disabled="previousDisabled">Forrige</a>
<a class="pagination-next" @click.prevent="changePage(meta.current_page + 1)" v-bind:disabled="nextDisabled">Neste</a>
<p>Side {{ meta.current_page }} av {{ lastpage }}</p>
</nav>
</div>
</div>
</template>
<script>
export default {
props: {
meta: Object,
links: Object,
instance: {
type: String,
default: 'default'
}
},
data() {
return {
lastpage: '',
}
},
watch: {
meta() {
this.lastpage = this.meta.last_page
}
},
computed: {
previousDisabled: function () {
if (!this.links.prev) {
return true;
}
},
nextDisabled: function () {
if (!this.links.next) {
return true;
}
},
},
methods: {
changePage (page) {
if (page < 1 || page > this.meta.last_page) {
return
}
this.$eventHub.$emit(this.instance + '.switchPage', page);
},
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.