Vue分页显示无限制的所有数字

如何解决Vue分页显示无限制的所有数字

我用vue和laravel创建了分页

Pagination.vue

    <template>
        <nav v-if="meta.total >= 1">
            <ul class="pagination" role="navigation">
                <li
                    :class="{ disabled: meta.current_page === 1 }"
                    class="page-item"
                    aria-disabled="true"
                    aria-label="« Previous"
                >
                    <a
                        class="page-link"
                        href="#"
                        @click.prevent="switched(meta.current_page - 1)"
                    >
                        <span>&laquo;</span>
                    </a>
                </li>
                <li
                    v-for="x in meta.last_page"
                    :class="{ active: meta.current_page === x }"
                    class="page-item"
                    v-if="x <= 20"
                >
                    <a href="#" @click.prevent="switched(x)">
                        <span class="page-link"> {{ x }}</span>
                    </a>
                </li>
                <li
                    :class="{ disabled: meta.current_page === meta.last_page }"
                    class="page-item"
                >
                    <a
                        href="#"
                        class="page-link"
                        @click.prevent="switched(meta.current_page + 1)"
                    >
                        <span>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </template>
    
    <script>
    export default {
        name: "Pagination",props: ["meta"],methods: {
            switched(page) {
                if (this.pageIsOutOfBounds(page)) {
                    return;
                }
    
                this.$emit("pagination:switched",page);
    
                this.$router.replace({
                    query: Object.assign({},this.$route.query,{ page: page })
                });
            },pageIsOutOfBounds(page) {
                return page <= 0 || page > this.meta.last_page;
            }
        }
    };
    </script>

并且通过AnotherComponent我已经像这样使用它

<template>
    <div class="container">
        <div class="row" :class="{ loading: loading }">
            <filters endpoint="/api/books/filters"></filters>
            <div class="col-lg-9 col-sm-7">
                <div class="row mt-4 mb-3 search-result" id="filter-grid">
                    <template v-if="books.length">
                        <div
                            class="col-6 col-md-3 filter-book-card"
                            style="overflow: hidden !important;"
                            v-for="book in books"
                        >
                            <book :key="book.id" :book="book"></book>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <pagination v-if="meta" :meta="meta"></pagination>
            </div>
        </div>
    </div>
</template>

<script>
import Filters from "./Filters";
import Book from "./Book";
import Pagination from "./Pagination";
import Sort from "./Sort";

export default {
    name: "Index",components: {
        Book,Pagination,Filters,Sort
    },data() {
        return {
            books: [],meta: null,loading: true
        };
    },mounted() {
        this.getBooks();
    },watch: {
        "$route.query": {
            handler(query) {
                this.getBooks(1,query);
            },deep: true
        }
    },methods: {
        getBooks(
            page = this.$route.query.page,filters = this.$route.query,main_category = this.$route.params.category
        ) {
            axios
                .get("/api/books",{
                    params: {
                        page,main_category,...filters
                    }
                })
                .then(response => {
                    console.log(response);
                    this.books = response.data.data;
                    this.meta = response.data.meta;
                    this.loading = false;
                });
        }
    }
};
</script>

分页工作正常，所有的下一个和上一个按钮也都正常工作，但是问题是，如果显示所有数字而不是对其进行限制（例如如果页面有500页），则列出从1到500的所有数字。如何摆脱这种情况..我希望只显示20页，然后单击“下一步”就可以隐藏以前的一些数字并显示新的数字..该怎么做？