Hey there! I've got a Firestore database set up to fetch profiles and display them on a page using v-for. I want to implement infinite scroll for a smoother user experience. Here's the JavaScript composable code I'm working with:
import { projectFirestore } from "../Firebase/Config";
import { ref } from "vue"
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)
}
const newPicturesCount = await load()
if (newPicturesCount > 0) {
return load() // More profiles to come
}
return console.log("done") // Done with the profiles
}
return { Premium, error, load }
}
export default getPremium
I was expecting the profiles to load consecutively with a v-for statement, enhancing user experience and reducing loading times. However, while the profiles are being logged as they load, they're not appearing in the v-for loop as expected. It seems like the same 4 profiles are being retrieved repeatedly, which is not my intention. Here's the Vue end for a complete overview:
<div v-for =" Premiums in Premium" :key="Premiums.id" >
<router-link :to="{ name: 'Samplepremium', params: { id: Premiums.id }}">
<div class= "hover:scale-105 transition ease-in-out duration-300 bg-neutral-800 hover:bg-neutral-900 active:bg-neutral-900 text-neutral-400 font-bold rounded-xl">
<br>
<p class="text-xl">{{ Premiums.Name }}</p>
<div class="relative">
<img :src= "Premiums.Pic1" class="object-contain px-1 inline-block w-96 h-44 md:w-60 md:h-80 lg:w-60 lg:h-80 xl:w-60 xl:h-80 2xl:w-60 2xl:h-80 transition ease-in-out duration-300">
<p class="bg-red-700 text-slate-300 text-xl absolute top-0 w-full">{{ Premiums.detail1 }}</p>
<p class="bg-red-700 text-slate-300 text-xl absolute bottom-0 w-full"> {{ Premiums.detail2 }} </p>
</div>
<div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
<p>Age:</p>
<p>{{ Premiums.detail3 }}</p>
<p>Location:</p>
<p>{{ Premiums.detail4 }}</p>
<p>Rates:</p>
<p>{{ Premiums.detail5 }} /hr</p>
<p>Phone:</p>
<p>{{ Premiums.detail6 }}</p>
</div><br>
</div>
</router-link>
</div>
</template>
If you have any suggestions on how to keep track of the current document and properly v-for the profiles after the initial load, I would greatly appreciate it. Thank you!