Как сделать пагинацию?

Question

[asferot]

Приходит запрос из БД, допустим с 1000 записей, как отображать только 5. Понимаю что можно решить это с помощью SQL, но нужно именно средствами Vue.

tbody
            tr(v-for="projecttp in projecttps" :key="projecttp.id")
              td.block-data
                span.data {{projecttp.add_time | change_time}}

computed:{
    ...mapState(['projecttps']),
  },
  mounted(){
    this.$store.dispatch('loadProjectTP')
  },

Answer 1

[0xD34F]

Добавим два свойства - количество элементов на странице (т.е., сколько элементов следует показывать единовременно) и номер текущей страницы:

perPage: 10, // или 20, или 50, это вам виднее... да и настраиваемым можно его сделать
page: 1,

Затем добавим пару вычисляемых свойств - количество страниц и элементы текущей страницы:

pages() {
  return Math.ceil(this.items.length / this.perPage);
},
pageData() {
  const end = this.page * this.perPage;
  return this.items.slice(end - this.perPage, end);
},

И отобразим элементы:

<div v-for="item in pageData">
  ...

Также сделаем методы для переключения страниц - по номеру и относительно текущей страницы...

goTo(page) {
  this.page = Math.max(1, Math.min(this.pages, page));
},
next(change) {
  this.goTo(this.page + change);
},

...чтобы дать пользователю возможность просмотреть все данные:

<button @click="goTo(1)">в начало</button>
<button @click="next(-1)">предыдущая страница</button>
<button @click="next(+1)">следующая страница</button>
<button @click="goTo(pages)">в конец</button>

https://jsfiddle.net/dkb5wej1/

Answer 2

[Roman K]

Тебе прочитать документацию про взятие элементов по индексу или сам догадаешься?

Answer 3

[Alex]

https://ru.vuejs.org/v2/guide/list.html#Отображени...