Блог

Главная - Вопросы по программированию - Как синхронизировать компонент пользовательского интерфейса Vuetify pagination с массивом

Как синхронизировать компонент пользовательского интерфейса Vuetify pagination с массивом

#vue.js #pagination #vuetify.js

#vue.js #разбивка на страницы #vuetify.js

Вопрос:

Я пытаюсь реализовать этот пример разбивки на страницы — https://medium.com/@denny .заголовок / pagination-in-vue-js-4bfce47e573b с пользовательским интерфейсом Vuetify для разбивки на страницы, но ожидается, что v-pagination начнется на странице 1. Результирующий набор представляет собой массив, поэтому он начинается со страницы 0. Я не могу понять, как синхронизировать их вместе.

Комментарии:

1. Можете ли вы опубликовать свой код?

Ответ №1:

Я думаю, что вы хотите сделать следующее:

 paginatedData() {
      const start = this.pageNumber * this.size - this.size, //sets the correct start on data
        end = start   this.size;
      return this.listData.slice(start, end);
}

И вместо написания разных функций next и previous используйте свойство @input в разбивке на страницы.

 <v-pagination v-model="pageNumber" :length="6" @input="nextPage" />

Пример взят из статьи medium:
https://codesandbox.io/s/charming-keldysh-8m0rk?file=/src/components/HelloWorld.vue