在 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

此外，您正在嘗試遍歷 function，您使用in運算符對其進行迭代。 在運算符中迭代 object 屬性，沒有 arrays。 並使用第一個小字符而不是像代碼“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>