Handle already paginated data with Vuetify

Question

I have already paginated data in the backend/server. I went through the docs of <v-data-table> but could not grasp the things there. Since I am using vuex and my data will be stored in state. Now how to combine them with, <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)
            })
      },
    },

On ResidentList.vue file :

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;
   }
 }
}

Now with this form of implementation, how do I use vuetify's <v-data-table> for pagination with paginated data?

Answer 1

use :options.sync="options" on vuetify's <v-data-table> and take an watcher on options as you want. ref# https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side

Other way, you can just pass the page no to props as :page="5"

and handle by @update:page="updatePagination"

control the function from your vue methods,

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