I've been working on implementing an infinite scroll feature in a Vue3 app. While everything is functioning well, I've hit a roadblock when it comes to loading more data once the user reaches the end of the page.
All profiles are initially stored in Vuex, but are rendered in batches as the user scrolls down the page.
My goal is to display an initial set of profiles, and then add more profiles to the array once the user reaches the bottom of the page.
To achieve this, I'm utilizing a computed property that waits for the Vuex array to load from the database. This ensures that the data is loaded before rendering. Additionally, the computed property recalculates each time new data is added.
Currently, the v-for directive is bound to this computed property. However, I am struggling to figure out how to push new profiles to this computed property. I attempted to assign the computed property to a component data property, but it seems that this approach is not effective.
Any assistance would be greatly appreciated.
<template>
<div v-for="profile in loadedProfiles" :key="profile.id">
{{ profile.name }}
</div>
</template>
<script>
export default {
data: () => ({
loadedProfiles: this.computedLoadedProfiles()
}),
computed: {
computedLoadedProfiles() {
if (this.$store.state.numberOfProfilesLoaded === this.$store.state.numberOfProfilesLoadedInitially) {
return this.$store.state.currentProfileList.slice(0, this.$store.state.numberOfProfilesLoadedInitially);
}
},
methods: {
loadMoreProfiles() {
if($store.state.scrolledToBottom) {
loadedProfiles.push(...) //push more profiles to loadedProfiles
}
}
}
},
}
</script>
<style>
</style>