vuejs-paginate - 按下导航栏品牌时切换到第 1 页活动 class

Question

I'm using this handy pagination tool called vuejs-paginate and it works just fine in terms of functionality when I click each individual page item , but when I press the navbar brand (which switches to page 1), the pagination tool does not switch the active class to page 1 and the active class just remains on the page you were previously at.

Here's my pagination code:

<template>
    <section role="region" class="paginate py-md-5 py-4" id="paginate">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <paginate
                        :page-count="20"
                        :click-handler="clickCallback"
                        :prev-text="'<'"
                        :next-text="'>'"
                        :container-class="'pagination'"
                        :page-class="'page-item'"
                        :page-link-class="'page-link'"
                        :next-class="'page-item'"
                        :next-link-class="'page-link'"
                        :prev-class="'page-item'"
                        :prev-link-class="'page-link'"
                        class="justify-content-center mb-0"
                    >
                    </paginate>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    methods: {
        clickCallback(pageNum) {
            this.$router.push({
                path: `/page/${pageNum}`
            })
        }
    }
}
</script>

<style lang="scss">

</style>

I was thinking of using some sort of way to programmatically click the first page item of the pagination when clicking on the navbar brand, but I'm not sure how to achieve this. Thanks for the help!

Answer 1

After a lot of debugging, I found out that it was actually where I had placed my pagination component. In my Nuxt app, I had put it inside default layouts . This means that when I had clicked on the navbar brand to go to the first page, the pagination did not remount . So what I did to resolve the problem was to transfer my pagination component to its individual pages . Now, when I switch from route to route, the active class will change because the pagination component remounts to react to the changes.