Vuetify/Vue2数据表格绑定props后排序/分页失效问题

问题概况 #

• 未绑定:options或:server-items-length时，表格默认每页显示10条数据，分页、排序功能完全正常，但API要求必须传入每页条目数参数，因此只能选择硬编码数值或绑定:options
• 硬编码条目数时功能正常，但绑定:options后，仅每页条目数生效，分页和排序功能失效
• 补充绑定:options.sync="options"、:sort-by.sync="sortBy"、:sort-desc.sync="sortDesc"后，分页和升序排序正常，但点击表头切换降序时，API请求的sortBy和sortDesc参数为空，请求路径出现无效的//片段

现有代码实现 #

数据表格模板 #

<v-data-table
  :items="ItemResults.items" 
  :headers="TableData.TableHeaders" 
  :loading="TableData.isLoading" 
  :options.sync="options"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
></v-data-table>

组件数据定义 #

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,
      sortBy: ['title'],
      sortDesc: [false]
    },
    sortBy: [
      'title', 'artist', 'upc', 'retailPrice'
    ],
    sortDesc:[true, false],
  }
},    

API请求方法 #

async getProducts(){
  this.TableData.isLoading = true;
  const { page, itemsPerPage } = this.options;
  // 降序排序时sortBy和sortDesc参数为空，导致请求路径异常
  var temp = await this.$axios.get(`Inventory/InventoryListing_inStock/1/${page}/${itemsPerPage}/${sortBy}/${sortDesc}`);
  this.ItemResults = temp.data;
  this.TableData.isLoading = false;
  return this.ItemResults;
},     

疑问 #

1. axios请求应该放在哪里，才能响应分页、排序参数的变化？
2. 如何配合后端新添加的排序功能，正确实现Vuetify服务端排序/分页的最佳实践？

内容的提问来源于stack exchange，提问作者Ryan Rockwell