QTable - error when i use async filter-method



  • 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.
    alt text

    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 []
    }
    


  • @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?



  • @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?
    alt text



  • 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)
    }
    

Log in to reply