I am attempting to develop a component that will render multiple elements as the page is scrolled. I am utilizing the Quasar framework for Vue.js. Below is the code required to render a single block containing information from a JSON file:
Quasar comes with a built-in infinite-scroll component, but the examples provided only include empty elements for rendering. In my scenario, I need to render elements sequentially from an object. I have tried placing the q-infinite-scroll component within a v-for, but this has often resulted in an infinite loop.
Could someone please explain how I can modify 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 ">Calories: (Kcal) Fats: (g) Carbohydrates: (g) Protein: (g)</div>
</q-item-section>
</q-card>
</div>
data(){
return{
products:json,
dropdownType:'grains'
}
},
methods:{
returnProductsBySelectedType(){
let arr=[]
for(const {type,products} of this.products){
if(this.dropdownType === type ) return products
if(this.dropdownType === 'all') arr.push(...products)
}
return arr
},
}
JSON file
[
{
"type":"grains",
"products":[
{
"id":1,
"name":"French Baguettes"
},
{
"id":2,
"name":"Hot Dog Buns"
},
{
"id":3,
"name":"Breadcrumbs"
},
{
"id":4,
"name":"Graham Rolls"
},
{
"id":5,
"name":"Butter Buns and Croissants"
},
{
"id":6,
"name":"Mixed Onion Rolls"
},
{
"id":7,
"name":"Milk Buns"
},
{
"id":8,
"name":"Oat Buns"
},
{
"id":9,
"name":"Regular Wheat Buns"
},
{
"id":10,
"name":"Regular Wheat Buns with Whey"
},
{
"id":11,
"name":"Soy Buns"
},
{
"id":12,
"name":"Swedish Buns"
},
{
"id":13,
"name":"Wroclaw Buns"
},
{
"id":14,
"name":"Fancy Loaves"
},
{
"id":15,
"name":"Baltonian Bread"
},
{
"id":16,
"name":"Beskidzki Bread"
},
{
"id":17,
"name":"Crispy Bread"
},
]
}
]