验证表自定义排序"TypeError:无法读取未定义的属性'filter‘“

Question

我在vuetify中有一个自定义排序实现的问题。

      <v-data-table
        :headers="table.headers"
        :items="table.items"
        :search="search"
        disable-pagination
        :header-props="{sortByText: 'sortiere nach...'}"
        :loading="loading"
        hide-default-footer
        :custom-sort="customSort"
        @click:row="rowClickHandler"
      />

这是我现在使用的customSort函数

    customSort(items, sortBy, sortDesc, locale) {
      if (!this.table.loading) {
        console.log(items)
        console.log(sortBy)
        console.log(sortDesc)
        console.log(locale)
      }
    }

问题是，我得到了一个很大很胖的Error in render: "TypeError: Cannot read property 'filter' of undefined"，也许这取决于我使用axios获取异步数据？

我在我的created()块中像这样获取

    async fetchUsers() {
      await axios
        .get('myApiPath')
        .then((res) => {
          this.table.items = res.data
          this.table.loading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },

Answer 1

您需要从customSort()返回一个数组。我相信这和你的异步数据获取没有任何关系。

customSort(items, sortBy, sortDesc, locale) {
  if (!this.table.loading) {
    console.log(items.map(e => e.calories));
    console.log(sortBy);
    console.log(sortDesc);
    console.log(locale);
  }

  // sort items here

  return items;
}

这是一个custom-sort()的sample implementation。