当尝试使用来自firebase数据库的数据时，v-for将无法工作。

Question

嗨，我一直试图从一个数据库中获取多个配置文件，并使用v-for来尝试显示它们，但是每当我尝试时，它都不能工作，它只是破坏了整个应用程序，这里是profile视图页面中的代码。

<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>

下面是从数据库获取概要文件的js文件。

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

我不知道我在这里做错了什么，任何帮助都是非常感谢的。

Answer 1

试着这样做：

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

Answer 2

您可以在vue文件的函数调用中从火药库集合中检索对象数据，然后使用如下所示将它们推入产品数组：

<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>

更好的流程是，当使用vue读取和从Firestore获取数据时，使用创建的生命周期挂钩获取数据，然后将接收到的数据存储(变异)到store.state.currentUser，然后它就可以工作了。否则，更新profileData并将模板替换为profileData而不是currentUser

您可能希望尝试并检查以下方法是否有帮助。

1.创建一个创建的生命周期挂钩，并将防火墙代码移动到该钩子中，然后将profileData对象分配给获取的数据。

      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.将模板中的currentUser替换为profileData。

检查是否有与从消防局获取数据和示例类似的解决方案。