Groyreg
@Groyreg
Front-end

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

Предположим, есть массив arr, в нем есть 42 элемента. Мне необходимо выводить этот массив на странице, но по 7 элементов за раз. Т.е., открыл страницу показалось первые 7 элементов, потом кликнул следующие 7 элементов и т.д.
  • Вопрос задан
  • 1853 просмотра
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Понадобятся два свойства - номер текущей страницы (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/
Ответ написан
bootd
@bootd
Гугли и ты откроешь врата знаний!
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы