Теперь мои пагинации работают синхронно во всех v-data-итераторах. Я не знаю, сколько элементов будет в массиве fieldsData, поэтому я не могу указать статические имена для «страницы», например, «страница_1», «страница_2»... Могу ли я как-то использовать другие переменные вместо «страницы», например, «страница + индекс»? Как я могу сделать независимую пагинацию на одной странице? мой код:
<template>
<div v-for = "(fieldData, index) in fieldsData"
:key = "index"
>
<template
v-if = "fieldData.data"
>
<v-data-iterator
:items = "fieldData.data"
:page.sync = "page"
:items-per-page = "itemsPerPage"
hide-default-footer
@page-count = "pageCount = $event"
>
<template v-slot:default = "props">
<v-row
v-else-if = "fieldData.meta.type === 'photo'"
>
<v-col
v-for = "(item, ind) in props.items"
:key = "item.id"
cols = "12"
sm = "6"
md = "3"
lg = "3"
>
<v-card>
...
</v-card>
</v-col>
<div class = "text-center pt-2">
<v-pagination
v-model = "page"
:length = "pageCount"
></v-pagination>
<v-text-field
:value = "itemsPerPage"
label = "Items per page"
type = "number"
min = "-1"
max = "15"
@input = "itemsPerPage = parseInt($event, 10)"
></v-text-field>
</div>
</v-row>
<v-row
v-else
>
<v-row>
<v-col
v-for = "(item, ind) in props.items"
:key = "item.id"
cols = "12"
sm = "6"
md = "3"
lg = "3"
>
<v-card>
...
</v-card>
</v-col>
</v-row>
<v-row>
<div class = "text-center pt-2">
<v-pagination
v-model = "page"
:length = "pageCount"
></v-pagination>
<v-text-field
:value = "itemsPerPage"
label = "Items per page"
type = "number"
min = "-1"
max = "15"
@input = "itemsPerPage = parseInt($event, 10)"
></v-text-field>
</div>
</v-row>
</v-row>
</template>
</v-data-iterator>
</template>
</div>
</template>
<script>
data: () => ({
page: 1,
pageCount: 0,
itemsPerPage: 4,
...
})
</script>
Вы можете создать массив такой же длины, как у вас fieldsData
.
Пример:
...
watch: {
fieldsData (value) {
this.paginations = value.map(() => ({
page: 1,
pageCount: 0
}))
}
}
...
<v-data-iterator
:items = "fieldData.data"
:page.sync = "paginations[index].page"
:items-per-page = "itemsPerPage"
hide-default-footer
@page-count = "paginations[index].pageCount = $event"
>
...
<v-pagination
v-model = "paginations[index].page"
:length = "paginations[index].pageCount"
></v-pagination>
Или, наоборот, вы можете просто создать новый компонент (что, на мой взгляд, лучше).