Vuetify로 이미 페이지 처리된 데이터 처리

Vuetify로 이미 페이지 처리된 데이터 처리

백엔드/서버에 이미 데이터 페이지를 작성했습니다.의 문서를 검토했습니다.<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)
            })
      },
    },

Resident List에 있습니다.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>페이지 부착 데이터로 페이지 부착이 가능합니까?

사용하다:options.sync="options"에vuetify's <v-data-table>감시자를 데려가서options당신이 원하듯이.ref# https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side

다른 방법으로는 '아니오' 페이지를 소품으로 넘길 수 있습니다.:page="5"

~로 처리하다@update:page="updatePagination"

vue 메서드에서 기능을 제어합니다.

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

언급URL : https://stackoverflow.com/questions/59978385/handle-already-paginated-data-with-vuetify