In my Firestore database, there are numerous profile documents that I want to display on a webpage using v-for. My goal is to show only 4 documents at a time and then load another set of four as the user scrolls for a smoother experience.
I initially attempted to retrieve just four documents, but I struggled with getting the next set of four instead of repeating the same ones. Despite trying various online examples, I couldn't find a solution that worked.
Below is the JavaScript snippet responsible for fetching profiles from Firestore:
const getPremium = () => {
const Premium = ref([])
const error = ref(null)
const load = async () => {
try{
const res = await projectFirestore.collection('Premium').limit(4).get()
Premium.value = res.docs.map(doc => {
console.log(doc.data())
return {...doc.data(), id: doc.id}
})
}
catch (err){
error.value = err.message
console.log(error.value)
}
}
return { Premium, error, load}
}
export default getPremium
Here's the Vue code where I aim to showcase all profiles with infinite scrolling:
<script setup>
import getPremium from "../Composables/getPremium.js";
const {Premium, error, load} = getPremium();
load();
</script>
<template>
<br>
<div class="grid ...">
<div v-for ="Premiums in Premium" :key="Premiums.id">
<router-link :to="{ name: 'Samplepremium', params: { id: Premiums.id }}">
<div class= "hover:scale-105 ...">
<br>
<p class="text-xl">{{ Premiums.name }}</p>
<div class="relative">
<img :src= "Premiums.Pic1" class="object-contain ...">
<p class="bg-red-700 text-slate-300 ...">{{ Premiums.det1 }}</p>
<p class="bg-red-700 text-slate-300 ..."> {{ Premiums.det2 }} </p>
</div>
<div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
<p>Age:</p>
<p>{{ Premiums.det3 }}</p>
<p>Location:</p>
<p>{{ Premiums.det4 }}</p>
<p>Rates:</p>
<p>{{ Premiums.det5 }} /hr</p>
<p>Phone:</p>
<p>{{ Premiums.det6 }}</p>
</div>
<br>
</div>
</router-link>
</div>
</template>
I have omitted my unsuccessful attempts to fetch another set of four profiles as it resulted in displaying the same set repeatedly. Any guidance on how to achieve this within the provided code would be highly appreciated.