vue.js - Vuetify 数据表上的自定义分页，每行选择项目

Question

我对带有自定义分页的 vuetify 表有疑问。分页是基于服务器的。我将 axios 用于路由。在应用程序加载时，我使用以下方法：

data() { return{ pageNumber: 1, pageSize: 15 } }

created() { this.getAllmessages(this.pageNumber, this.pageSize) },

该方法从服务器检索所有数据，除了表格显示的数据之外，还有关于分页的数据：currentpage、lastPage、itemsOnPage ...所有这些都保存在 vuex 存储中。currentPage = 1 和 itemsOnPage = 15 在服务器上定义。

下面是检索消息的代码。更准确地说是 vuex 动作

async getAllmessages({ rootState, commit }, data) {
  const { token } = rootState;
  const response = await api.fetchMessages(token, data);
  commit('GET_MESSAGES', response.data);

哪个电话

  fetchMessages(token) {
    return axios.get(`${BASE_URL}messages/getAll?pageNo=${data.pageNumber}&pageSize=${data.pageSize}`, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

在我的 pagination.vue 组件中有用于选择每页项目的选项

<select class='select' v-model='itemsOnPage'>
  <option value='10'>10 Rows</option>
  <option value='15'>15 Rows</option>
  <option value='20'>20 Rows</option>
</select>

下面是我计算的 getter 和 setter 属性，观察者可以了解 itemsOnPage 发生的任何变化

data(){return{ perPage: [15], pageNumber: [1], }}

 watch: {
currentPage(newVal) {
  this.pageNumber = newVal;
  this.paginatePage(this.pageNumber, this.perPage);
},
itemsOnPage(newVal) {
  this.perPage = newVal;
  this.rowsPerPage(this.pageNumber, this.perPage);
},
computed: {
currentPage: {
  get() {
    return this.$store.state[this.store].currentPage;
  },
  set(value) {
    this.$store.commit(`SET_CURRENT_PAGE_${this.store}`, value);
  },
},
lastPage: {
  get() {
    return this.$store.state[this.store].numberOfPages;
  },
},
itemsOnPage: {
  get() {
    return this.$store.state[this.store].itemsOnPage;
  },
  set(value) {
    this.$store.commit('SET_ITEMS_PER_PAGE', Number(value));
  },
},
methods: {
async paginatePage(pageNumber, pageSize) {
  await this.$store.dispatch(`getAll${this.store}`, {
    pageNumber,
    pageSize,
  });
},
async rowsPerPage(pageNumber, pageSize) {
  await this.$store.dispatch(`getAll${this.store}`, {
    pageNumber,
    pageSize,
  });
},

我得到的错误是到达这条路线时：

axios.get(`${BASE_URL}messages/getAllpageNo=${data.pageNumber}&pageSize=${data.pageSize})

其中pageNo=未定义&pageSize=未定义

欢迎任何帮助！

标签： vue.jsvuejs2datatablepaginationvuetify.js