Блог

Теперь мои разбивки на страницы работают синхронно во всех v-data-итераторах. Я не знаю, сколько элементов будет в массиве fieldsData, поэтому я не могу указать статические имена для «страницы», например «page_1», «page_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>
 

Пример скрипки

Или, в качестве альтернативы, вы можете просто создать новый компонент (что, я думаю, является лучшим способом).

Пример скрипки