如何将Vuetify分页UI组件与数组同步

Question

我正在尝试实现这个分页示例-https://medium.com/@denny.headrick/pagination-in-vue-js-4bfce47e573b，带有Vuetify的分页UI，但v-pagination预计将从第1页开始。结果集是一个数组，因此它从第0页开始。我不知道如何将它们同步在一起。

Answer 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);
}

在分页中使用@input属性，而不是编写不同的next和previor函数。

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

由介质文章制成的示例：https://codesandbox.io/s/charming-keldysh-8m0rk?file=/src/components/HelloWorld.vue