Laravel Vue Bulma pagination component

Instruction

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)
            }
        },

pagination.vue

<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>