带有 Vue 的 firestore 数据库：当我刷新页面时，我没有在屏幕上看到数据，答案

【问题标题】：firestore database with Vue: when I refresh the page I don't get the data on screen,带有 Vue 的 firestore 数据库：当我刷新页面时，我没有在屏幕上看到数据，
【发布时间】：2020-12-19 16:51:43
【问题描述】：

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

这是来自数据库的数据。

但是当我刷新页面时，我不再获取数据了。

【问题讨论】：

请查看这个外部tutorial。还可以尝试@Henrique 下面提供的答案，让我知道它是否适合您，以便进一步调查。
我已经解决了我只添加了一个带有空数组的变量：Profile: [] 然后它就可以工作了。谢谢你的帮助。

标签： firebase vue.js google-cloud-firestore

【解决方案1】：

发生这种情况是因为“Created”仅在页面创建期间被调用，每次访问时都会发出请求，尝试将“Created”更改为“Mounted”。

有关 Vue.js 生命周期的更多信息搜索。

【讨论】：