javascript - Cannot see published data and image on a site, what is missing?

Question

So I have a problem with pulling data from firebase to template. I want to see my published data, I can see them on my console but not on a template. I think maybe it's the problem with matching the js objects in my HTML code. What should I change?

This is my HTML code:

    <div class="row">
            
            <div v-for="info in info" :key="info" class="col-lg-4 col-md-4 col-sm-4 col-xs-12" cards-aos="fade-right">
                <div class="blog column text-center">
                <div class="card-header"> {{info.imeLokacije}} </div>
                <div class="card-body p-0"> 
                    <img class="card-img-top" :src="info.url" /> 
                </div>
                    
                </div>
            </div>

    </div>     
</div>
</section>

I have already imported store, storage, firebase, database. Also db collection created for posts. And this is my javascript:

data: function() {
return {
    cards: [],
    email: "",
    lozinka: "",
    novoImeLokacije: "",
    noviKontakt: "",
    novaCijena: "",
    noviOpisSlike: "",
    slikaReference: null,
    postedFromNow2: "Ok from data",
    };
},


mounted() {
    this.noveObjave();
},

methods: {
    noveObjave() {
        console.log("firebase dohvat");
        let cards = [];

        db.collection("objave")
        .get()
        .then((query) => {
            this.cards = []; 
            query.forEach((doc) => {
                const data = doc.data();
                console.log(data);

                this.cards.push({
                    id: doc.id,
                    time: data.posted_at,
                    Url: data.url,
                    imeLokacije: data.imeLokacije,
                    kontakt: data.kontakt,
                    stanje: data.stanje,
                    novaCijena: data.iznosCijene,
                    opisSlike: data.opisSlike,
                    
                })
            });
        });
    },

    objave() {
        const imeLokacije = this.novoImeLokacije;
        const kontakt = this.noviKontakt;
        const iznosCijene = this.novaCijena;
        const opisSlike = this.noviOpisSlike;
        const stanje = this.stanje = document.getElementById("stanje").value;
        const url = this.url;

        this.slikaReference.generateBlob(blobData => { 
        console.log(blobData);
        let nazivSlike = "objave/" + store.currentUser + "/" +  Date.now() + ".png";
        
        storage
            .ref(nazivSlike)
            .put(blobData)
            .then(result => {

                result.ref.getDownloadURL().then((url) => {
                console.log("Javni link", url);

question from:https://stackoverflow.com/questions/65887112/cannot-see-published-data-and-image-on-a-site-what-is-missing

Answer 1

Your template is looping over info, but that is undefined. It looks like you are setting the data on cards, not info. Also, in the v-for you are calling the local item the same name ("info") as the array name. Change your loop to:

<div v-for="card in cards" :key="card.id" class="col-lg-4 col-md-4 col-sm-4 col-xs-12" cards-aos="fade-right">
  <div class="blog column text-center">
    <div class="card-header"> {{ card.imeLokacije }} </div>
    <div class="card-body p-0"> 
      <img class="card-img-top" :src="card.url" /> 
    </div>               
  </div>
</div>