Question

I ve got an firestore database and I m trying to use an infinite scroll on the profile page to load all the profiles but it isn t even getting the data from the database because I should be seeing the documents data appear in the console log. this is the javascript page which gets the documents and limits them to 8.

import { projectFirestore } from "../Firebase/Config";



const fetchPosts = async (lastPost) => {
    let query = projectFirestore.collection( Premium ).orderBy( createdAt ).limit(8)
    
    if (lastPost) {
      query = query.startAfter(lastPost.createdAt)
    }
  
    const snapshot = await query.get()
  
    const posts = snapshot.docs.map(doc => {
        console.log(doc.data())
      return { id: doc.id, ...doc.data() }
    })
  
    return posts
  }
  export default fetchPosts

这是诉讼一方

<script>
import { ref, reactive } from  vue 
import fetchPosts  from  ../../Composables/limitedProfiles 

export default {
  setup() {
    const state = reactive({
      posts: [],
      lastPost: null,
      fetching: false
    })

    const container = ref(null)

    const handleScroll = async () => {
      if (container.value.scrollTop + container.value.clientHeight >= container.value.scrollHeight && !state.fetching) {
        state.fetching = true

        const posts = await fetchPosts(state.lastPost)
        state.posts = [...state.posts, ...posts]

        if (posts.length) {
          state.lastPost = posts[posts.length - 1]
        }

        state.fetching = false
      }
    }

    return {
      container,
      handleScroll,
      ...state
    }
  }
}

</script>
<template>
    <br><br>
    <p class="text-5xl text-red-700 font-serif">Infinite scroll</p><br><br><br>
    <div ref="container" @scroll="handleScroll">
    <div v-for="post in posts" :key="post.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>{{ post.Name }}</p>
     <img :src= "post.Pic1" class="object-contain ml-6 w-60 h-80 transition ease-in-out duration-300">
     <div class="grid grid-cols-2 grid-rows-fit text-left ml-6">
     <p>Location:</p>
     <p>{{ post.Location }}</p>
     <p>detail1:</p>
     <p>{{ post.detail1 }} /hr</p>
     <p>detail2:</p>
     <p>{{ post.detail2 }}</p>
     <p>detail3:</p>
     <p>{{ post.detail3 }}</p>
    </div>
  </div><br>
</div>
    <div v-if="fetching">Loading...
    </div>
    </div>
</template>

如果任何人能够看一看,让我知道我会做什么错事,我会感谢。

友情链接