vuejs-paginate - переход на активный класс страницы 1 при нажатии на марку navbar - PullRequest
Новая
       53

vuejs-paginate - переход на активный класс страницы 1 при нажатии на марку navbar

0 голосов
/ 29 сентября 2019

Я использую этот удобный инструмент разбивки на страницы под названием vuejs-paginate , и он прекрасно работает с точки зрения функциональности, когда я нажимаю на каждый отдельный элемент страницы , но когда я нажимаю на панель навигациибренда (который переключается на страницу 1), инструмент разбивки на страницы не переключает активный класс на страницу 1, а активный класс просто остается на той странице, на которой вы были ранее.

Вот мой код разбиения на страницы: 

<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>

Я думал об использовании какого-то способа программно щелкнуть первый элемент страницы нумерации страниц при нажатии на марку navbar, но я не уверен, как этого добиться.Спасибо за помощь!

1 Ответ

0 голосов
/ 30 сентября 2019

После долгих отладок я обнаружил, что на самом деле , где , я разместил свой компонент разбиения на страницы.В моем приложении Nuxt я поместил его в стандартные макеты .Это означает, что когда я нажал на марку navbar, чтобы перейти на первую страницу, нумерация страниц не была remount .Поэтому я решил перенести компонент разбиения на страницы на отдельные страниц .Теперь, когда я переключаюсь с маршрута на маршрут, активный класс изменится, потому что компонент пагинации перемонтируется, чтобы отреагировать на изменения.

...