vue.jsfrontendvuejs3vuetify.jsvuetifyjs3

@update:pagination in Vuetify3?


<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?


Solution

  • 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>