QTable - error when i use async filter-method

[SLIpros]

Hey, is it possible to set filter-method async? I am getting error “undefined p.” and it’s happens only if filter-method is set to async.

async filterMethod(rows: Array<NormalizedGood>, terms: string): Array<NormalizedGood> {
    console.log('filterMethod', terms)
    const current = this.records.filter(g => g.article.includes(terms) || g.name.toLowerCase().includes(terms))
    if (current.length) return current

    this.loading = true
    const resp: IJsonRPCResponse<IGoodsGet> = await this.sendRequest({ method: 'good.get', params: { search: terms } })
    this.loading = false
    if (!resp.hasError) {
        const goods: Array<IGood> = resp.result.goods
        if (goods.length) {
            this.$store.commit('user/addGoods', goods)
            return goods.map(g => this.normalize(g))
        }
    }
    return []
}

[dobbel]

@SLIpros

So the only difference between the async and non async is the sync filterMethod part? What about the await this.sendRequest? You must have more differences between the 2 filter functions right?

What does the console say? No errors?

[SLIpros]

@dobbel said in QTable - error when i use async filter-method:

@SLIpros

So the only difference between the async and non async is the sync filterMethod part? What about the await this.sendRequest? You must have more differences between the 2 filter functions right?

What does the console say? No errors?

When filterMethod is async it just never called and i get this “undefind p.” error inside q-table. There are no any errors at console. this.sendRequest is just Action from vuex store and it’s working fine.

So i tryed to set return type as Promise

async filterMethod(rows: Array<NormalizedGood>, terms: string): Promise<Array<NormalizedGood>> {
  console.log('filterMethod', rows, terms)
  const current = rows.filter(g => g.article.includes(terms) || g.name.toLowerCase().includes(terms))
  if (current.length) return current

  const resp: IJsonRPCResponse<IGoodsGet> = await this.sendRequest({ method: 'good.get', params: { search: terms
  }
})
  if (!resp.hasError && resp.result) {
    const goods = resp.result.goods
    if (goods.length) {
      this.$store.commit('user/addGoods', goods)
      return goods.map(g => this.normalize(g))
  }
}
  return []
}

Now it’s called as i see console.log, but when execution touch line with await i receive console error that happens inside q-table. Such behavior only happens inside filterMethod function. I tryed to called sendRequestion as this.$store.dispatch(‘main/sendRequest’), but it’s behave in same way. It’s looks like filterMethod can’t be async. Then how i request data from server when it’s can’t find any data localy?

[SLIpros]

Problem solved with watch. Now i don’t use original quasar filter and filter-method. Create my custome one

@Watch('filter')
async onFilterChange(filter: string) {
	this.filtered = !filter.length ? [] : await this.filterMethod(this.clean, filter)
}