外部分页 vuetify 数据表答案

【问题标题】：External pagination vuetify data-table外部分页 vuetify 数据表
【发布时间】：2020-02-03 04:16:45
【问题描述】：

我有从 API 返回的对象，格式如下：

{
 "count": 0,
 "result": [
    {
     "id": "5dfbb8d5b2f68faf05688997",
     "createdOn": "1577121878136",
     "hash": "d7a3a552a2c1a765b3bcd935980a1982",
     "modifiedOn": "1577121878136",
     "company": {},
     "home": {},
     "first_name": "string",
     "last_name": "string",
     "isActive": true,
     "funding": "string",
     "medication": "string",
     "startDate": "string"
    }
  ]
}

我正在使用vuex 来存储数据。如何使用vuetify'sv-data-table进行分页。后端是分页的。我的 api 是 axios.get(..../?page='+page + '&count='+count)' 我需要传递 page 和 count 作为参数来获取分页数据。

如果你能给我一些资源来做这件事，我将不胜感激。我试过了，但我没能做到，也没有找到任何材料。我关注vuetify's docs 获取external pagination，但它假定数据仅在外部分页，它们不链接到veux store。

【问题讨论】：

搞清楚一件事，你的api有分页数据吗？如果您通过页面并正确计数？
我的意思是你的问题是什么？您从 api 获取数据的问题？或在v-data-table 上显示分页数据？
@hasan05 我从服务器获取的数据是分页的，我需要在v-data-table 上显示分页数据，但是使用 vuex，是的，我需要传递页面并计算 url。

标签： vue.js vuejs2 vue-component vuex vuetify.js

【解决方案1】：

使用这些参数调用 v-data-table。

<v-data-table
        :headers="yourHeadersArrayOfObject"
        :items="yourItemsArrayOfObject"    
        :page="yourCurrentPageNumber"
        :items-per-page="yourItemsPerPage"
        @update:page="pageUpdateFunction"
      ></v-data-table>

关于方法处理页面更新 =>

pageUpdateFunction(newPageNumber) {
  console.log(newPageNumber);
  // handle other axios request here and update varibles
},

【讨论】：

我可以在方法中处理 vuex 状态吗？我的意思是我想在每次发出新的分页请求时将我的对象存储在 vuex 存储中，并渲染该存储的对象。
不。（或者可能是，我不知道。）。你可以做的是，你必须通过计算属性来做到这一点。