在vue应用程序中使用数据库数据有困难吗？

Question

嗨，我一直试图从一个数据库中获取多个配置文件，并使用v-for来尝试显示所有配置文件，但是每当我尝试时，它都无法工作，而且我也想不出如何让它使用应该导入的数据。下面是javascript文件的样子。

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').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)
        }
    }

    return { Premium, error, load}
}

export default getPremium

这里是我尝试使用v-for创建配置文件的vue。

<script>
import getPremium from "../Composables/getPremium.js";
const {Premium, error, load} = getPremium();
load();
</script>
<template>
<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>

</template>

我不知道该怎么做才能让它正常工作，我刚开始使用数据库，任何帮助都会非常感谢，谢谢

Answer 1

此外，您试图通过函数迭代，您使用in运算符迭代它。在运算符迭代对象属性时，没有数组。并使用创建变量调用，首先使用小字符，不像代码"Premium“中的大字符。

<script>
  import getPremium from "../Composables/getPremium.js";
  const { premiumList, error, load } = getPremiumList(); // Name variables, functions with first small letter not big one. Interfaces, Clases with first big letter. Add "List" or "s" in end of name so everyone knows it is array.
  load();
</script>
<template>
    <main>
        <div v-for="item of premiumList" :key="item.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>{{ item.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>{{ item.Location }}</p>
                    <p>Rates:</p>
                    <p>{{ item.Rates }} /hr</p>
                    <p>Phone:</p>
                    <p>{{ item.Phone }}</p>
                </div>
                <br />
            </div>
        </div>
    </main>
</template>

Answer 2

您正在从getPremium()中销毁Premium，所以这就是您应该在v-for中使用的

    <script>
import getPremium from "../Composables/getPremium.js";
const { Premium, error, load } = getPremium();
load();
</script>
<template>
    <main>
        <div v-for="item in Premium" :key="item.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>{{ item.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>{{ item.Location }}</p>
                    <p>Rates:</p>
                    <p>{{ item.Rates }} /hr</p>
                    <p>Phone:</p>
                    <p>{{ item.Phone }}</p>
                </div>
                <br />
            </div>
        </div>
    </main>
</template>