Vuetify / Vue (2) data.table 不对新的绑定道具进行排序/分页

Question

保持表格尽可能基本以解决这个问题。 我正在努力学习如何在 vuetify 中创建到 function 的服务器端排序/分页。 当我添加：options 或：server-items-length 绑定时，表不再排序或分页。

如果没有其中任何一个，我会得到每行 10 个项目的默认列表 - 并且所有排序和分页都工作得很好。 但是，api 中的参数需要页面项目计数，因此强制使用硬编码数字或使用 :options 绑定。 如果我只是放置一个硬编码数字，一切正常，但是当我绑定时，我每页得到正确的项目，但没有排序和分页。

很简单 data.table：

             <v-data-table
           :items="ItemResults.items" 
           :headers="TableData.TableHeaders" 
           :loading="TableData.isLoading" 
       >
         </v-data-table>    

    

//Base data returns, with headers and options as well the array that items are stored in.

    

   data() {
         return {
             ItemResults:[],
             TableData: {
                 isLoading: true,
                 TableHeaders: [
          
                     { value: "title", text: "Title" },
                     { value: 'artist', text: 'Artist' },
                     { value: 'upc', text: 'UPC' },
                     { value: "retailPrice", text: "Price/Quantity"},
                 ],
             },
             options: 
             {
                page: 1, 
                itemsPerPage: 15
            },
         }
     },    

    

//Then last, my async method to grab the data from the api, and place it in the itemresults array.

             
    async getProducts(){
             this.TableData.isLoading = true;
             const { page, itemsPerPage } = this.options;
             var temp = await this.$axios.get(`Inventory/InventoryListing_inStock/1/${page}/${itemsPerPage}`);
             this.ItemResults = temp.data;
             this.TableData.isLoading = false;
             return this.ItemResults;
         },     

我试过按照Vuetify Pagination and sort serverside guide 进行操作，但我不确定他们建议在哪里拨打 axios 电话。

领先的后端开发人员正在努力在 api 中设置一个排序 function，以便我也调用参数 - 我不确定 function 会怎样。

但我不知道如何通过 vuetify 或这里的最佳实践来控制它。

编辑：我已经同步了以下内容：

           :options.sync="options"
           :sort-by.sync="sortBy"
           :sort-desc.sync="sortDesc"

但我想我不需要同步最后两个。 我的选择：

             options: 
             {
                page: 1, 
                itemsPerPage: 15,
                sortBy: ['title'],
                sortDesc: [false]
            },

在我的数据中，我将数组用于排序依据和排序描述

            sortBy: [
                'title', 'artist', 'upc', 'retailPrice'
            ],
            sortDesc:[true, false],

分页现在可以工作，升序排序现在可以工作，但是当我单击下降 header 时，我得到一个错误，最后两个参数在更新到 // 而不是 /sortBy/sortDesc 结果时为空。 所以它没有列出更改的值。

Answer 1

1. 当您的组件挂载时，您需要获取服务器上可用的项目总数和数据的第一页，并将它们设置为:items和:server-items-length 。 后者将（如您观察到的那样）禁用分页和排序，因为您的服务器会处理它，并且它用于计算给定选定页面大小的页面总数。
2. 现在您需要知道何时重新加载数据。 为此，您可以使用双向绑定 ( .sync ) 将options绑定到v-data.table并在其上设置观察者，或者监听update:options事件。 And whenever options change, you fetch the selected data from the server.

这基本上就是全部。

在你的模板中：

       <v-data-table
           :items="items" 
           :headers="headers" 
           :loading="true"
           :server-items-length="numberOfItemsOnServer"
           @update:options="options => loadPage(options)"
       />

在您的组件中：

methods: {
  async loadPage(options){
    this.items = [] // if you want to show DataTable's loading-text
    this.items = await fetch('yourUrl' + new URLSearchParams({
      // build url params from the options object
      offset: (options.page - 1) * options.itemsPerPage,
      limit: options.itemsPerPage,
      orderBy: options.sortBy.map((sb,ix) => [sb, options.sortDesc[ix] ? 'desc' : 'asc'])
    }))
  }
}