Обработка уже разбитых на страницы данных с помощью Vuetify

Question

Я уже разбил данные на бэкэнд / сервер. Я просмотрел документы <v-data-table>, но не смог найти там вещи. Поскольку я использую vuex, и мои данные будут храниться в state. Теперь, как объединить их с <v-data-table>.

resident.js:

export default {
  state : {
    residents: [],
  },
   mutations: {
    set_residents (state, residents) {
        state.residents = residents
    },
   },
   getters: {
    allResidents (state) {
        return state.residents
    },
   },
    actions: {
    get_resident_list (context, page) {
        let page = page.page || this.state.pagination.page;
        let count = page.count || this.state.pagination.count;
        return residentApi.getResidents(page, count) 
            .then(residents => {
                context.commit('set_residents', residents)
                return residents
            })
            .catch(error => {
                return Promise.reject(error)
            })
      },
    },

В файле ResidentList. vue:

import { mapGetters,  mapActions } from 'vuex'
export default {
  data () {
    return {
        residents: '',
        headers: ....,
    }
  },
  computed: {
  ...mapGetters([
        'allResidents',
    ]),
  },
  created() {
    this.get_resident_list(),
    this.residents = this.allResidents;
},
methods: {
    ...mapActions([
        'get_resident_list',
        'refresh_resident_list'
    ]),
 },
 watch: {
   allResidents() {
     this.residents = this.allResidents;
   }
 }
}

Теперь с этим форма реализации, как я могу использовать vuetify's <v-data-table> для разбивки на страницы с разбитыми на страницы данными?

Answer 1

используйте :options.sync="options" на vuetify's <v-data-table> и возьмите наблюдателя на options, как хотите. ref # https://vuetifyjs.com/en/components/data-tables#paginate -and-sort-server-side

Другой способ, вы можете просто передать страницу no реквизитам как :page="5"

и обработать с помощью @update:page="updatePagination"

управление функцией из ваших vue методов,

updatePagination (pagination) {
    console.log('update:pagination', pagination)
  }