firestore database with Vue: when I refresh the page I don't get the data on screen,

Question

I use Firestore with Vue and the problem is: I can't get the data from the database but when I change the :key="Profiles['.key']" to this :key="Profiles" then I see the data on my screen but when I refresh the page the data is gone it doesn't see it any more.

This is the code:

<template>
    <div>
        <h1 class="text-center mt-16">Admin</h1>
        <div v-for="Profiles in Profile" :key="Profiles" class="text-center mt-16">
            <p>{{Profiles.username}}</p>
            <p>{{Profiles.email}}</p>
            <p>{{Profiles.userId}}</p>
            <p>{{Profiles.role}}</p>
            <p>{{Profiles.haveAccess}}</p>
            <p>{{Profiles.createdAt}}</p>
        </div>
    </div>
</template>

<script>
/*eslint-disable-line*/import { db } from '../../Database';
import firebase from 'firebase';
export default {
    data() {
        return {
            currentUser: firebase.auth().currentUser
        }
    },
    created() {
        this.currentUser = firebase.auth().currentUser;
    },
    firestore: {
      Profile: db.collection('Profile')
    }
}
</script>

Here is the data from the database.

But when I refresh the page I don't get the data anymore.

Please have a look into this external tutorial. And also try the answer provided below from @Henrique and let me know if it works for you or not in order to investigate further. — Nibrass H
– Nibrass H, Commented Sep 1, 2020 at 14:56
I have solved it I add only a variable with a empty array: Profile: [] and then it works. Thanks for you help. — Mustafa
– Mustafa, Commented Sep 3, 2020 at 13:01

Henrique Noronha Favorette · Accepted Answer · 2020-08-31 17:15:12Z

1

This happens because the "Created" is only called during the creation of the page, for the request to be made every time it is accessed try to change the "Created" for "Mounted".

For more information search on Vue.js Life Cycle.

answered Aug 31, 2020 at 17:15

Henrique Noronha Favorette

462 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

firestore database with Vue: when I refresh the page I don't get the data on screen,

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related