javascript - Vue.js 对象属性在赋值后“隐藏”

Question

我可以从 Firebase 数据库中检索数据，但是当我尝试分配从数据库中获取的数据时，对象属性要求您调用 getter（我的意思是分配后我无法访问它们）

这是 Vue 实例。

是的，我知道。这是奇怪的格式，这是 VS Code 为我做的事情......

export default {
    name: "Home",
    data() {
        return {
            users: []
        };
    },
    created() {
        db.collection("users")
            .get()
            .then(snapshot => {
                snapshot.forEach(doc => {
                    let user = doc.data();
                    user.id = doc.id;
                    this.users.push(user);
                    console.log(this.users);
                });
            });
    }
};

当我打开控制台时，我需要单击三个点来获取实际数据。

标签： javascriptfirebasevue.jsgoogle-cloud-firestore

Answer 1

以下应该可以解决问题：

export default {
    name: "Home",
    data() {
        return {
            users: []
        };
    },
    created() {
        db.collection("users")
            .get()
            .then(snapshot => {
                let usersArray = [];
                snapshot.forEach(doc => {
                    let user = doc.data();
                    user.id = doc.id;
                    usersArray.push(user);
                });
                this.users = usersArray;
                console.log(this.users);
            });
    }
};