Having trouble using database data in vue app?

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 doesn't work on and I can't figure out how to get it to use the data which should be getting imported. Below is what the javascript file looks like.

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

And heres the vue where I am trying to use v-for to create the profiles.

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

I'm not sure what I need to do from here to get it to work properly, I'm new to using databases and any help would be greatly appreciated, Thankyou

Robert · Accepted Answer · 2022-08-25 08:57:05Z

Besides, you are trying to iterate through function, you iterate it using in operator. In operator iterates object properties, no arrays. And created variables call using first small character not big one like you have in code "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>

MaxCode · Accepted Answer · 2022-08-25 06:23:10Z

0

You are destructuring Premium from getPremium(), so that is what you should use in your 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>

answered Aug 25, 2022 at 6:23

MaxCode

1476 bronze badges

5 Comments

Epimetheus14 Over a year ago

Thanks but is there anything else I'm doing wrong because it still doesn't work?

MaxCode Over a year ago

Can you share what you get when you call console.log(doc.data()) inside getPremium and also if you console.log Premium in the template.

Epimetheus14 Over a year ago

I get Missing or insufficient permissions. in the console?

MaxCode Over a year ago

I don't know about firebase but It may be something with your Firestore security rules, probably not allow to read and write for some reason. I am sure if you google firebase Missing or insufficient permissions you will get some good answers stackoverflow.

Epimetheus14 Over a year ago

Yes it was the rules in the database were set to false not true for read and writes, Thanks.

Collectives™ on Stack Overflow

Having trouble using database data in vue app?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related