v-for won't work when trying to use data from firebase database

Question

Hi I've been trying to get multiple profiles from a database and use v-for to try and display them all but whenever I try it doesnt work on and it just crashs the whole app heres the code from the profile view page.

<script>
import { getPremium } from '../Composables/getPremium.js';
const getPremiums = getPremium();

</script>

<div v-for =" Premium in getPremiums" :key="Premium.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>{{ Premium.Name }}</p>
     <img src="../assets/Sample-pic.png" 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>{{ Premium.Location }}</p>
     <p>Rates:</p>
     <p>{{ Premium.Rates }} /hr</p>
     <p>Phone:</p>
     <p>{{ Premium.Phone }}</p>
   
    </div><br>
  </div>
  </div>

Heres the js file that gets the profiles from the database.

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

const getPremium = () => {
    const profiles = ref([])
    const error = ref(null)

    const load = async () => {
        try{
            const res = await projectFirestore.collection('profiles').get()

            profiles.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 { profiles, error, load}
}

export default getPremium

I'm not sure what I've done wrong here any help would be greatly appreciated thanks.

Answer 1

try it like this:

const {profiles, error, load} = getPremium();
load();

Answer 2

You can retrieve your object data from the firestore collection in the function call of your vue file, and then push them into your products array using something like this:

<script>
 import { db } from '../firebase'; 
export default { data() { return { profile: [], }; },
mounted() { db.collection(profile).get().then((querySnapshot) => { 
                   querySnapshot.forEach((doc) => { 
                      this.products.push(doc.data()); }); }); }, } 
</script>

The better flow is when using the vue to read and get data from the Firestore, fetch data using created lifecycle hook, then either store(mutate) the received data to the store.state.currentUser then it might work. else update the profileData and replace the template with profileData instead of currentUser

You may want to try and check if the below approach helps.
1.Create a created lifecycle hook and move the firebase code to that and then assign the profileData object to the fetched Data.

      created()
     { 
       const firestore = database.firestore(); 
      firestore.collection('users').doc(firebase.auth().currentUser.uid). onSnapshot(function(doc)
         { 
      console.log('current data:', doc.data()) var newData = doc.data() this.profileData = newData;
         })
      }

2.Then replace the currentUser in template to profileData.

Check for a similar solution to get data from firestore and examples available here.