Вызов

<template>
    <div>
        <div class="feedback-block">
            <button class="btn btn-primary col-md-3" @click="toggleModal">Создать новое обращение</button>
            <br><br>
            <div class="mess">
                <div class="mess-item" v-for="todo in laravelData.data">
                    <div class="mess-item-left">
                        <div class="mess-date">{{ todo.date }}</div>
                        <div class="mess-new" v-if="todo.messagesNew > 0">
                            Новых сообщений: {{ todo.messagesNew }}
                        </div>
                        <div class="mess-total" v-else>Сообщений: {{ todo.messagesTotal }}</div>
                    </div>
                    <div class="mess-item-right">
                        <router-link tag="div" class="mess-tema" exact-active-class="active" to="feedback/messages">
                            {{ todo.tema }}
                        </router-link>
                        <div class="mess-text">{{ todo.text }}</div>
                    </div>
                </div>
            </div>

            <Paginator :data="laravelData" :limit="3" @pagination-change-page="getResults"></Paginator>

        </div>

        <modal title="НОВОЕ ОБРАЩЕНИЕ" :visible="modalVisible" v-if="modalVisible"  v-on:closeModal="modalVisible = false">
            <modal-create></modal-create>
        </modal>
    </div>
</template>

<script>
    import Modal from '../../../_partials/Modal';
    import Paginator from '../../../_partials/Paginator';
    import ModalCreate from './ModalCreate';
    import axios from 'axios';

    export default {
        components: {
            Modal,
            Paginator,
            ModalCreate,
            axios,
        },
        mounted() {
            // Fetch initial results
            var queryDict = {}
            location.hash.substr(location.hash.indexOf("?")+1).split("&")
                .forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]});
            if (parseInt(queryDict.page)) this.getResults(queryDict.page);
            else this.getResults();
        },

        methods: {
            toggleModal() {
                this.modalVisible = !this.modalVisible;
            },

            // Our method to GET results from a Laravel endpoint
            getResults(page = 1) {
                axios.get('/api.php/?page=' + page)
                    .then(response => {
                        this.laravelData = response.data;
                    });
            },

        },
        data() {
            return {
                // Our data object that holds the Laravel paginator data
                laravelData: {},
                modalVisible: false,
            }
        },
        props: ['initial'],
    };
</script>

 

Компонент

<template>
	<div>
		<div class="mypagination" v-if="data.total > data.per_page">
			<a class=""
			   v-if="data.current_page !=1"
			   @click.prevent="selectPage(1)"
			> Первая </a>
			<a class="prev"
			   v-if="data.current_page !=1"
			   @click.prevent="selectPage(--data.current_page)"
			>
				<slot name="prev-nav">Предыдущая <span class="left-arrow">&#8592;</span></slot>
			</a>

			<a v-for="n in getPages()"
			   :class="{ 'active': n == data.current_page }"
			   @click.prevent="selectPage(n)"
			>{{ n }}</a>

			<a class="next"
			   v-if="data.current_page !=data.last_page"
			   @click.prevent="selectPage(++data.current_page)"
			>
				<slot name="next-nav">Следующая <span class="rigth-arrow">&#8594;</span></slot>
			</a>
			<a class=""
			   v-if="data.current_page !=data.last_page"
			   @click.prevent="selectPage(data.last_page)"
			>
				Последняя (<b>{{ data.last_page }}</b>)
			</a>
		</div>

		<span v-else=""> Нет данных </span>
	</div>
</template>

<script>

    var updateQueryStringParam = function (key, value) {
        if (location.hash.indexOf("?")!=-1)
        	var hash = location.hash.substr(0, location.hash.indexOf("?"));
        else var hash = location.hash;
        var baseUrl = [location.protocol, '//', location.host, location.pathname, hash ].join(''),
            urlQueryString = document.location.search,
            newParam = key + '=' + value,
            params = '?' + newParam;

        // If the "search" string exists, then build params from it
        if (urlQueryString) {
            let keyRegex = new RegExp('([\?&])' + key + '[^&]*');

            // If param exists already, update it
            if (urlQueryString.match(keyRegex) !== null) {
                params = urlQueryString.replace(keyRegex, "$1" + newParam);
            } else { // Otherwise, add it to end of query string
                params = urlQueryString + '&' + newParam;
            }
        }
        window.history.replaceState({}, "", baseUrl + params);
    };

    export default {
        props: {
            data: {
                type: Object,
                default: function() {
                    return {
                        current_page: 1,
                        data: [],
                        from: 1,
                        last_page: 15,
                        next_page_url: null,
                        per_page: 10,
                        prev_page_url: null,
                        to: 1,
                        total: 20,
                    }
                }
            },
            limit: {
                type: Number,
                default: 0
            }
        },

        methods: {
            selectPage: function(page) {
                if (page === '...') {
                    return;
                }

                this.$emit('pagination-change-page', page);
                updateQueryStringParam('page',page);
            },
            getPages: function() {
                if (this.limit === -1) {
                    return 0;
                }

                if (this.limit === 0 ) {
                    return this.data.last_page;
                }

                var current = parseInt(this.data.current_page),
                    last = parseInt(this.data.last_page),
                    delta = parseInt(this.limit),
                    left = current - delta,
                    right = current + delta + 1,
                    range = [],
                    pages = [],
                    l;

				if ( (current-1) > this.limit  ) pages.push('...');
                for (var i = 1; i <= last; i++) {
                    if ( (i >= left && i < right)) {
                        pages.push(i);
                    }
                }
				if ( (last-current) > this.limit  ) pages.push('...');

                return pages;
            }
        }

    };

</script>

<style>
	.mypagination {
		display: inline-block;
		color:#0a246a;
	}
	.mypagination a {
		color: black;
		float: left;
		padding: 8px 16px;
		text-decoration: none;
		border-top: 2px solid grey;
	}
	.mypagination a.active {
		color: red;
		border-top: 2px solid red;

	}

	.mypagination a:hover:not(.active) {
		background-color: #ddd;
	}
	.mypagination a.next {
		position:relative;
		width: 150px;
		padding-right:20px;
	}
	.mypagination .rigth-arrow {
		top: -16px;
		font-size: 42px;
		position: absolute;
	}
	.mypagination a.prev {
		position:relative;
		width: 150px;
		padding-left: 40px;

	}
	.mypagination .left-arrow {
		font-size: 42px;
		position: absolute;
		right: 14px;
		left: 0px;
		top: -16px;
	}

</style>