How to create with Quasar page that load while scroling

Question

I trying to create component that render more elements while scroling a page. I use Quasar framework for vue. This is code needed to render a single block that contains a information from json file

https://quasar.dev/vue-components/infinite-scroll

Quasar has built in infinite-scroll component, but in these examples, they're adding only empty elements to render. In my case, I need to render elements in order from object. I tried already adding q-infinite-scroll component inside v-for but this in most cases created an infinity loop

Can someone explain to me how can I adapt this example to render more complex objects ?

    <div v-for="(p,k) in returnProductsBySelectedType()" class='caption' :key="p.name">
                  <q-card class="my-card" flat bordered v-if="p.name !== undefined">
                    <q-item class="" >
                      <q-item-section >
                        <div class="text-body1 q-mt-sm q-mb-xs" >{{ p.name }}</div>
                      </q-item-section>
                      <q-btn flat class="bg-primary" style="width:50px; height: 50px;" color="white" :icon='includeProduct(p,k) ? "remove" : "add"' @click=' includeProduct(p) ?  removeProducts(p) : addProductToList(p)' :key="k"></q-btn>
                    </q-item>
                    <q-separator />
                    <q-item-section class="q-pa-sm bg-grey-3">
                      <div class="text-subtitle2 flex ">Kalorie: (Kcal) Tłuszcze: (g) Weglowodany: (g) Bialko: (g)</div>
                    </q-item-section>
                  </q-card>
                </div>

data(){
  return{
     products:json,
     dropdownType:'zboża'
  }
},
methods:{
returnProductsBySelectedType(){
     let arr=[]
     for(const {type,products} of this.products){ 
       if(this.dropdownType === type ) return products
       if(this.dropdownType === 'wszystko') arr.push(...products)
     }
     return arr
   },
}

Json file

[
   {
      "type":"zboża",
      "products":[
         {
            "id":1,
            "name":"Bagietki francuskie"
         },
         {
            "id":2,
            "name":"Bułeczki do hot-dogów"
         },
         {
            "id":3,
            "name":"Bułka tarta"
         },
         {
            "id":4,
            "name":"Bułki grahamki"
         },
         {
            "id":5,
            "name":"Bułki i rogale maślane"
         },
         {
            "id":6,
            "name":"Bułki mieszane, z cebulą"
         },
         {
            "id":7,
            "name":"Bułki mleczne"
         },
         {
            "id":8,
            "name":"Bułki owsiane"
         },
         {
            "id":9,
            "name":"Bułki pszenne zwykłe"
         },
         {
            "id":10,
            "name":"Bułki pszenne zwykłe, z serwatką"
         },
         {
            "id":11,
            "name":"Bułki sojowe"
         },
         {
            "id":12,
            "name":"Bułki szwedki"
         },
         {
            "id":13,
            "name":"Bułki wrocławskie"
         },
         {
            "id":14,
            "name":"Chałki zdobne"
         },
         {
            "id":15,
            "name":"Chleb baltonowski"
         },
         {
            "id":16,
            "name":"Chleb beskidzki"
         },
         {
            "id":17,
            "name":"Chleb chrupki"
         },
      ]
   }
]

Answer 1

Check out the Infinite Scroll component APi: https://next.quasar.dev/vue-components/infinite-scroll#qinfinitescroll-api

You need to listen to the @load event which is fired when the component needs more data. There you can inject more data from the JSON file.