Пагинация во Vue.js

Привет, Хабр! Представляю вашему вниманию перевод статьи "Pagination in Vue.js" автора Denny Headrick.

Пагинация увеличивает UX, позволяя пользователям визуализировать данные в небольших блоках или на страницах. Вот и компонент Vue.js можно сделать с разбивкой по страницам, который позволит нам просматривать только часть наших данных за раз.



Сначала я буду добавлять кусочек за кусочком в свой JavaScript объект. А затем покажу template (шаблон)

Из всех локальных данных, мне нужны, только данные - номер страницы.

data(){
    return {
      pageNumber: 0  // по умолчанию 0
    }
}

Для props (свойств), передача данных является обязательной, но я также возьму size аргумент для максимального количества записей.

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}

Для моей реализации я буду использовать методы для перехода на previous (предыдущую) и next (следующую) страницы:

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}

Быстрое вычисляемое свойство computed, чтобы выяснить, сколько есть страниц:

pageCount(){
      let l = this.listData.length,
          s = this.size;
      // редакция переводчика спасибо комментаторам
      return Math.ceil(l/s);
      // оригинал
      // return Math.floor(l/s);
}

Теперь вычисленное свойство (computed) paginatedData - это место, где все объединяется. Это отфильтрованные данные, которые будут отображаться.

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
    return this.listData.slice(start, end);
}

Редакция: я изначально делал что-то ужасное и громоздкое, чтобы скопировать массив. Использование .slice - лучший подход. Спасибо, Alexander Karelas.

И наш template (шаблон)

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

Я хочу, чтобы кнопки работали, когда они только должны. Для кнопки prevPage я добавлю: 

:disabled=«pageNumber==0»

а для кнопки nextPage добавлю: 

:disabled=«pageNumber >= pagecount -1»

Рабочая демонстрация моего компонента:


Иногда бывает трудно переоценить ситуацию, но разбиение на страницы - это простая функция, которую мы можем предложить нашим пользователям без особых усилий.

Спасибо за прочтение!

Denny Headrick - веб-разработчик USAF, который слишком сильно любит свою работу. В дополнение к разработке на различных платформах и Vue.js, когда он может, он любит вести блог изредка. Вы можете следить за ним в Twitter на @dennythecoder.