Question

我正在使用vuejs和Firebase，并且在onSnapshot回调中无法访问“此”属性。

这是我的代码：

import db from './firebaseInit'

export default {

    name: 'dashboard',

    data() {

        return {
            posts: [],
            connected_users: [],
            test: [],
        }
    },

    created() {

        db.collection('flutter_data').get().then(querySnapshot => {
            querySnapshot.forEach(doc => {

                const data = {
                    'id': doc.id,
                    'userName': doc.data().userName,
                    'title': doc.data().title,
                    'like': doc.data().like,
                    'url': doc.data().url,
                    'type': doc.data().type,
                    'userID': doc.data().userID,
                    'userlikers': doc.data().userlikers
                };
                this.posts.push(data)
            })
        });

        db.collection('connected_users').get().then(querySnapshot => {
            querySnapshot.forEach(doc => {

                const data = {
                    'userID': doc.data().userID,
                    'userName': doc.data().userName,
                    'connected': doc.data().connected
                };
                this.connected_users.push(data)
            })
        });

        db.collection('flutter_data').where("userName", "==", "Simon à tout moment")
            .onSnapshot(function(snapshot) {

                snapshot.docChanges().forEach(function(change) {

                    const data = {
                        'id': change.id,
                        'userName': change.doc.data().userName,
                        'title': change.doc.data().title,
                        'like': change.doc.data().like,
                        'url': change.doc.data().url,
                        'type': change.doc.data().type,
                        'userID': change.doc.data().userID,
                        'userlikers': change.doc.data().userlikers
                    };

                    if (change.type === "added") {
                        console.log("New post: ", change.doc.data());
                    }
                    if (change.type === "modified") {
                        console.log("Modified post: ", change.doc.data());
                        console.log(this);
                    }
                    if (change.type === "removed") {
                        console.log("Removed post: ", change.doc.data());
                    }
                });
            });
    }}

我的问题在此方法内：

 db.collection('flutter_data').where("userName", "==", "Simon à tout moment")
    .onSnapshot(function(snapshot)

我无法像这种方法那样访问“ this”属性：

  db.collection('flutter_data').get().then(querySnapshot => {
        querySnapshot.forEach(doc => {

            const data = {
                'id': doc.id,
                'userName': doc.data().userName,
                'title': doc.data().title,
                'like': doc.data().like,
                'url': doc.data().url,
                'type': doc.data().type,
                'userID': doc.data().userID,
                'userlikers': doc.data().userlikers
            };
            this.posts.push(data)
        })
    });

在这里，“ this.posts.push（data）可以工作，但是在onSnapshot（...）中，我不能做同样的事情。我想这样做是为了实时更新我的网站，每次修改Firebase上的帖子时，都可以看到更改。

有人可以解释一下为什么无法访问我吗，也许我该怎么做呢？

Answer 1

一种选择是在提取数据之前保存this引用，因为Promise中的this不再是Vue实例，因此您可以尝试以下方法：

var vueInstance = this;
db.collection('flutter_data').get().then(querySnapshot => {
    querySnapshot.forEach(doc => {

        const data = {
            'id': doc.id,
            'userName': doc.data().userName,
            'title': doc.data().title,
            'like': doc.data().like,
            'url': doc.data().url,
            'type': doc.data().type,
            'userID': doc.data().userID,
            'userlikers': doc.data().userlikers
        };
        vueInstance.posts.push(data)
    })
});

Vue.js和Firebase：无法访问onSnapshot（）中的“ this”

1 个答案: