Как с помощью vue выводить лишь часть элементов массива, а по клику показывать следующую часть?

Question

[Gregory]

Предположим, есть массив arr, в нем есть 42 элемента. Мне необходимо выводить этот массив на странице, но по 7 элементов за раз. Т.е., открыл страницу показалось первые 7 элементов, потом кликнул следующие 7 элементов и т.д.

Answer 1

[0xD34F]

Понадобятся два свойства - номер текущей страницы (page) и количество элементов на странице (perPage). Имея эти значения, можно показать элементы текущей страницы (UPD. Тут, конечно, косяк - items.slice... надо было унести в computed):

<div v-for="item in items.slice((page - 1) * perPage, page * perPage)">
  {{ item }}
</div>

Также вычислим общее количество страниц:

computed: {
  numPages() {
    return Math.ceil(this.items.length / this.perPage);
  },
},

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

methods: {
  next(change) {
    this.page = Math.max(1, Math.min(this.numPages, this.page + change));
  },
},

И чтобы блокировать кнопку перехода к следующей странице, когда таковой нет:

<button @click="next(-1)" :disabled="page <= 1">prev</button>
<button @click="next(+1)" :disabled="page >= numPages">next</button>

https://jsfiddle.net/7a1w62xm/1/

Comments

[Gregory]

0xD34F, блин какое удобное решение.. не знал, что прямо в директиве v-for можно добавлять методы к массиву :)
Спасибо Вам.

Answer 2

[Дима Паутов]

pagination vuejs