NuxtJS пагинация

Разрабатываем компонент пагинации контента на NuxtJS

План такой:

  • переделываем script для page/content/index.vue
  • создаем компонент ThePagination
  • настраиваем внешний вид пагинации (на свой вкус)

Выводим список

<script>
const pagination = {
  getPostsOfPage($content, page) {
    return $content('blog')
      .sortBy('date', 'desc')
      .skip(10 * (page - 1))
      .limit(10)
      .fetch()
  },

  async getNumberOfPages($content) {
    return Math.ceil((await $content('blog').only([]).fetch()).length / 10)
  },
}

export default {
  async asyncData ({ $content, route }) {
    const page = parseInt(route.query.page || '1') || 1
    const [posts, pageCount] = await Promise.all([
      pagination.getPostsOfPage($content, page),
      pagination.getNumberOfPages($content),
    ])
    return { posts, page, pageCount }
  },
  data() {
    return {
      posts: [],
      pageCount: 1,
    }
  },
  computed: {
    page: function () {
      return this.$route.query.page || 1
    }
  },
  watch: {
    async page() {
      this.$router.replace({ path: '/blog', query: { page: this.page } })
      this.posts = await pagination.getPostsOfPage(this.$content, this.page)
    },
  },
  head () {
    return {
      title: 'Блог Валерия Малышева',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Блог веб-программиста Валерия Малышева'
        }
      ]
    }
  }
}
</script>

Лимит записей: 10, меняем под себя.

В template выводим компонент который мы создадим в следующем шаге:

<ThePagination v-model="page" :pageCount="pageCount" :route="this.$route" />

В pageCount выводим общее количетсво постов, route передаем для получения активной страницы и назначения ей класса active (потому что когда я писал this.$route в компоненте у меня ругалось что это не реактивно).

Создаем компонент ThePagination

В папка components создаем файл ThePagination.vue со следующим содержимым:

<template>
        <ul class="pagination">
            <li v-for="page in pageCount">
                <button 
                    @click="goto(page)" 
                    :class="{'active': activePage == page}"
                >
                    {{ page }}
                </button>
            </li>
        </ul>
</template>

<script>
    
    export default {
        props: {
            pageCount: {
                type: Number,
                required: true
            },
            route: {
                type: Object,
                required: true
            },
        },
        methods: {
            goto(page) {
                this.$emit('input', page)
            }
        },
        computed: {
            activePage: function () {
              return this.route.query.page || 1
            }
        }
    }
</script>

Вот и всё! Пагинация работает, осталось её только оформить и хорошо было бы добавить scroll к началу списка постов при клике на номер страницы в блоке пагинации.

Для этого установим vue-scrollto

npm install --save vue-scrollto

и в компонент пагинации добавим:

var VueScrollTo = require('vue-scrollto');
export default {
    // ...
    methods: {
      goto(page) {
        this.$emit('input', page)
        VueScrollTo.scrollTo('.grid');
      }
    },
    // ...
}

Вместо .grid указываем элемент к которому нужно скролить.


Опубликовано 18 апреля 2021 г. в категории: NuxtJS

Если Вам необходимо внедрить данную разработку на свой проект, свяжитесь со мной, обсудим цену и срок.

Связаться со мной Fill 1