$ Route.query.page возвращает неправильное значение или проблема с приведением типа в условии v-if

Question

Я создаю страницу постов, и главное - это нумерация страниц.

Я создал компонент разбиения на страницы, который выглядит следующим образом:

<template>
    <nav aria-label="Pagination">
        <ul class="pagination justify-content-end">
            <li class="page-item" v-if="currentPage !== 1">
                <a @click="previous" class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
            </li>
            <li v-for="page in getNumberOfPagesShow"
                v-bind:class="{ disabled: page === currentPage }"
                class="page-item">
                <a @click="clickPage(page)" class="page-link" href="javascript:void(0)">
                    {{ page }}
                </a>
            </li>
            <li class="page-item" v-if="currentPage !== totalPages">
                <a @click="next" class="page-link" href="javascript:void(0)">Next</a>
            </li>
        </ul>
    </nav>

</template>

<script>
    export default {
        name: "pagination",
        props: ['app', 'onClickPage', 'totalPages', 'page'],
        data()
        {
            return {
                currentPage: this.page,
                lastPage: 0
            }
        },


        computed: {
            getNumberOfPagesShow()
            {
                if (this.totalPages > 10)
                {
                    return 10;
                }

                return this.totalPages;
            }
        },

        methods: {
            previous()
            {
                this.currentPage--;

                this.clickPage(this.currentPage);
            },

            next()
            {
                this.currentPage++;

                this.clickPage(this.currentPage);
            },

            clickPage(page)
            {
                this.currentPage = page;

                this.onClickPage(page);
            }
        }
    }
</script>

<style scoped>

</style>

и компонент вызывается с помощью

                <!-- Pagination Top -->

                <pagination :total-pages="thread.posts.last_page"
                            :page="app.$route.query.page"
                            style="margin-top: 20px;"
                            :on-click-page="clickPage">
                </pagination>

Все работает, кроме атрибута :page="app.$route.query.page", который устанавливает currentPage внутри компонента нумерации страниц.

Теперь этот код не работает:

    <li class="page-item" v-if="currentPage !== 1">
        <a @click="previous" class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a>
    </li>

Она должна скрывать предыдущую кнопку, если текущая страница равна 1. Однако это не работает, предполагая, что app.$route.query.page не получает значение правильно.

Когда я отлаживаю в методе created(), я пишу

console.log(this.app.$route.query.page)

возвращает правильное значение. Так что я не знаю, в чем проблема. Заранее спасибо!

Answer 1

Отлично, решение заключалось в том, чтобы разобрать упор page в int:

    data()
    {
        return {
            currentPage: parseInt(this.page),
            lastPage: 0
        }
    },