How to use infinite scroll in quasar to load more datas?



  • I am trying to load more data using quasar infinite scroll but i cannot load any more data infact it loads all the data once… and i got

    done() is not a function
    

    Below is my method for infinite scroll

    initDefaultData (done, index) {
      setTimeout (() => {
        if (this.datas) {
          db.collection('example').orderBy('created_at', 'desc').get().then(res => {
            if (res.size < 1) {
              this.noData = true
            } else {
              res.forEach((doc) => {
                this.datas.push({
                  id: doc.id
                })
              })
            }
          })
          done()
        }
      }, 1000)
    }
    

    Here is where i use infinite scroll in template

    <q-infinite-scroll @load="initDefaultData">
      <q-card v-for="(data, index) in datas" :key="index" class="q-mb-md q-mt-sm">
      </q-card>
    </q-infinite-scroll>
    


  • @vltetea

    You have to put the args in the @load

    <q-infinite-scroll @load="initDefaultData(index,done)">
      <q-card v-for="(data, index) in datas" :key="index" class="q-mb-md q-mt-sm">
      </q-card>
    </q-infinite-scroll>
    

    Or with arrows:

    <q-infinite-scroll @load="(index,done) => initDefaultData(index,done)">
      <q-card v-for="(data, index) in datas" :key="index" class="q-mb-md q-mt-sm">
      </q-card>
    </q-infinite-scroll>
    

    BTW: virtual scroll is better suited for infinite scrolling like q-virtual-scroll.


Log in to reply