CODEWITHSUNDEEP
vue.jsaxiosvuetify.js
Deniz
Deniz

Reputation: 95

vuetify table custom sort "TypeError: Cannot read property 'filter' of undefined"

i am having an issue with a custom sort implementation in 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"
      />

This is my customSort function just for now

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

problem is that i get a big fat Error in render: "TypeError: Cannot read property 'filter' of undefined" maybe it depends on my async data fetching with axios?

i am fetching like this in my created() block

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

Upvotes: 1

Views: 1135

Answers (1)

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

You need to return an array from your customSort(). I believe it has nothing to do with your async data fetching.

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;
}

Here is a sample implementation of custom-sort().

Upvotes: 1

Related Questions