@update:pagination in Vuetify3?

Question

<template>
  <v-app>
    <v-container>
      <div class="search-section">
        <div class="search-fields">
          <v-text-field v-model="search" label="ФИО"></v-text-field>
          <v-text-field v-model="birthdateSearch" label="Дата рождения"></v-text-field>
          <v-text-field v-model="studyUidSearch" label="UUID исследования"></v-text-field>
          <v-text-field v-model="studyDateSearch" label="Дата исследования"></v-text-field>
          <v-text-field v-model="modalitySearch" label="Модальность"></v-text-field>
        </div>
      </div>
    <v-data-table :items="filteredItems" multi-sort :loading="loading" @update:pagination="updatePagination">
      <template v-for="header in headers" v-slot:[`header.${header.value}`] :key="header.value">
        <span>{{ header.text }}</span>
      </template>
    </v-data-table>
    </v-container>
  </v-app>
</template>

<script setup>
const updatePagination = async () => {
  console.log("hello im here");
};
</script>

Im making an web app and trying to implement search in big data with pagination, I want to display the next 100 records on the next page event but it seems like @update:pagination not working in vuetify 3, are there any analogs?

Answer 1

v-data-table dont have this event. You need pagination by manual, you can use this way:

<template>
  <v-data-table 
   :items="tableData"
   :itemsPerPageOptions="itemsPerPageOptions" 
   :items-per-page="pageSize" 
   @update:items-per-page="onPageSizeChange" 
   :page="pageNow" 
   @update:page="onPageNowChange">
    <template v-slot:item.exclusive="{ item }">
      <v-checkbox v-model="item.exclusive" readonly></v-checkbox>
    </template>
  </v-data-table>
</template>

<script setup lang="js">
import { ref } from 'vue'
const tableData = ref([
  {
    name: 'PlayStation 5',
    manufacturer: 'Sony',
    year: 2020,
    sales: '10M',
    exclusive: true,
  },
  {
    name: 'Xbox Series X',
    manufacturer: 'Microsoft',
    year: 2020,
    sales: '6.5M',
    exclusive: false,
  },
  {
    name: 'Nintendo Switch',
    manufacturer: 'Nintendo',
    year: 2017,
    sales: '89M',
    exclusive: true,
  },
  {
    name: 'PlayStation 4',
    manufacturer: 'Sony',
    year: 2013,
    sales: '116M',
    exclusive: true,
  },
  {
    name: 'Xbox One',
    manufacturer: 'Microsoft',
    year: 2013,
    sales: '50M',
    exclusive: false,
  },
  {
    name: 'Nintendo Wii',
    manufacturer: 'Nintendo',
    year: 2006,
    sales: '101M',
    exclusive: true,
  },
])
const itemsPerPageOptions = ref([
  { value: 2, title: '2 items' },
  { value: 5, title: '5 items' },
  { value: 10, title: '10 items' },
  { value: -1, title: 'All items' }])

const pageSize = ref(2)
const onPageSizeChange = (rowsPerPage) => {
  console.log('Page size changed to:', rowsPerPage)
  pageSize.value = rowsPerPage
  // update tableData from the server
}
const pageNow = ref(1)
const onPageNowChange = (page) => {
  console.log('Page changed to:', page)
  pageNow.value = page
  // update tableData from the server
}
</script>