Блог

Я использую Firestore с Vue, и проблема в том, что я не могу получить данные из базы данных, но когда я меняю :key="Profiles['.key']" на это :key="Profiles" , я вижу данные на своем экране, но когда я обновляю страницу, данные исчезают, они больше не отображаются.

Это код:

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

Вот данные из базы данных.

Но когда я обновляю страницу, я больше не получаю данные.

Это происходит потому, что «Созданный» вызывается только во время создания страницы, чтобы запрос выполнялся при каждом обращении к нему, попробуйте изменить «Созданный» на «Смонтированный».

Для получения дополнительной информации ищите на Vue.js Жизненный цикл.