CODEWITHSUNDEEP
javascriptvuejs2vuetify.js
MkBht
MkBht

Reputation: 78

How to access total items outside v-data-table in vuetify.js 2?

I have just migrated vuetify.js from 1.5 to 2.1.7. Previously I was able to access total no. of items (reactive) in the data-table outside of v-data-table using :pagination.sync="pagination" props and accessing with 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>

But in version 2.x, pagination prop has been removed and replaced with options instead with breaking changes and couldn't able to access the total no. of items. Is there any way in version 2 to access total items which sync with search and filter?

Upvotes: 1

Views: 2061

Answers (1)

onurelibol
onurelibol

Reputation: 777

<v-data-table> has an event named pagination. You can use the event to update your current pagination property unless you want to override pagination options.

Try to use it in this way:

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

This will synchronize pagination property each time there is a change on pagination options. 

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

You can find more information here under Events tab.

Upvotes: 1

Related Questions