Laravel和VueJs分页没有正确显示所有记录

Question

我在代码中添加了分页，但我注意到并非所有帖子都显示且分页不正常。

<template>
    <nav id="page_nav" class="pagination is-centered is-rounded" role="navigation" aria-label="pagination">
        <li><a class="pagination-previous" @click.prevent="changePage(1)" :disabled="pagination.current_page <= 1">«</a></li>
        <li><a class="pagination-previous" @click.prevent="changePage(pagination.current_page - 1)" :disabled="pagination.current_page <= 1"><</a></li>
        <ul class="pagination-list">
            <li v-for="page in pages">
                <a class="pagination-link" :class="isCurrentPage(page) ? 'is-current' : ''" @click.prevent="changePage(page)">{{ page }}</a>
            </li>
        </ul>
        <li><a class="pagination-next" @click.prevent="changePage(pagination.current_page + 1)" :disabled="pagination.current_page >= pagination.last_page">></a></li>
        <li><a class="pagination-next" @click.prevent="changePage(pagination.last_page)" :disabled="pagination.current_page >= pagination.last_page">»</a></li>

    </nav>
</template>

<style>
    .pagination {
        margin-top: 40px;
    }
</style>

<script>
    export default {
        props: ['pagination', 'offset'],
        methods: {
            isCurrentPage(page) {
                return this.pagination.current_page === page;
            },
            changePage(page) {
                if (page > this.pagination.last_page) {
                    page = this.pagination.last_page;
                }
                this.pagination.current_page = page;
                this.$emit('paginate');
            }
        },
        computed: {
            pages() {
                let pages = [];
                let from = this.pagination.current_page - Math.floor(this.offset / 2);
                if (from < 1) {
                    from = 1;
                }
                let to = from + this.offset - 1;
                if (to > this.pagination.last_page) {
                    to = this.pagination.last_page;
                }
                while (from <= to) {
                    pages.push(from);
                    from++;
                }
                return pages;
            }
        }
    }
</script>

在帖子组件中，我有这个：

<pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="showPosts()"></pagination>
<table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Description</th>
        <th>Category</th>
        <th>Owner</th>
      </tr>
    </thead>
    <tbody>
        <tr v-for="(post, id) in posts">
           <td>{{ post.id }}</td>
           <td>{{ post.title }}</td>
           <td>{{ post.description | snippet }}</td>
           <td>{{ post.category.name }}</td>
           <td>{{ post.user.name }}</td>
           <td><button @click.prevent="iniUpdate(id)" class="btn btn-info" data-toggle="modal" data-target="#editModal">Edit</button></td>
           <td><button @click="deletePost(id)" class="btn btn-danger">Delete</button></td>
        </tr>
    </tbody>
</table>
<pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="showPosts()"></pagination>

show posts methos看起来像这样：

showPosts(){
    axios.get('/api/posts?page=' + this.pagination.current_page)
    .then(response => {
        this.posts = response.data.data.data;
        this.pagination = response.data.pagination;
    });              
}

我是我的控制器，这是我用来显示帖子的内容：

public function index()
{
    $posts = Post::with('user', 'category')->paginate(8);

    $response = [
        'pagination' => [
            'total' => $posts->total(),
            'per_page' => $posts->perPage(),
            'current_page' => $posts->currentPage(),
            'last_page' => $posts->lastPage(),
            'from' => $posts->firstItem(),
            'to' => $posts->lastItem()
        ],
        'data' => $posts
    ];
    return response()->json($response);
}

我看到的问题是：每次我点击箭头查看最后一页，或者在带有最后一页编号的按钮上，其余按钮都会停止显示相关页面。

所以，如果我有8个按钮：当我点击2时它会显示，依此类推，直到我点击按钮8，然后不再显示任何其他内容。

注意：按钮将模拟记录正在变化，但记录不会改变。

希望我能正确解释这个问题

如何让我的分页正常工作？