Как получить доступ ко всем элементам за пределами v-data-table в vuetify.js 2?

Question

Я только что мигрировал vuetify.js с 1.5 до 2.1.7. Ранее я был в состоянии получить доступ к общему количеству. элементов (реактивных) в таблице данных вне v-data-table с использованием :pagination.sync="pagination" реквизитов и доступа с помощью pagination.totalItems.

Vuetify 1.5

<template>
    <div>
        <span>Total: {{ pagination.totalItems }}</span>
        <v-data-table :pagination.sync="pagination" :items="items">
            ...
        </v-data-table>
    </div>
</template>

<script>
    export default {
        name: "LoadTable",
        data() {
            return {
              items: [...],
              pagination: {}
            };
        }
   }
</script>

Но в версии 2.x, реквизит для нумерации страниц был удален и заменен параметрами, вместо этого были внесены критические изменения, и он не смог получить доступ к общему количеству. предметов. Есть ли способ в версии 2 для доступа к общим элементам, которые синхронизируются с поиском и фильтром?

Answer 1

<v-data-table> имеет событие с именем pagination. Это событие можно использовать для обновления текущего свойства pagination, если вы не хотите переопределять параметры пагинации.

Попробуйте использовать его следующим образом:

<v-data-table :items="items" @pagination="pagination = $event">

Это будет синхронизировать свойство пагинации каждыйвремя изменения параметров пагинации.

// Pagination object
{
  page: number
  itemsPerPage: number
  pageStart: number
  pageStop: number
  pageCount: number
  itemsLength: number
}

Более подробную информацию можно найти здесь на вкладке Events.