Vue.js - Ich kann nicht auf berechnete Eigenschaften von Methoden zugreifen

Question

Ich habe eine Login-Methode in einer Vue-Komponente, die Firebase verwendet, um einen Benutzer anzumelden. Ich verwende die berechneten Eigenschaften user, message und hasErrors. Wenn diese Methode ausgeführt wird, geht es in die catch-Funktion, aber dieser Fehler tritt auf: Uncaught TypeError: Cannot set property 'message' of undefined. Ich habe versucht, den Vuex-Status direkt zu ändern (weil das der berechnete Prop ist), aber das ergibt denselben Fehler. Hier ist die Methode, die ich bin mit:

login: function (event) { 
    // ... more stuff 
    // Sign-in the user with the email and password 
    firebase.auth().signInWithEmailAndPassword(this.email, this.password) 
    .then(function (data) { 
     this.user = firebase.auth().currentUser 
    }).catch(function (error) { 
     this.message = error.message 
     this.hasErrors = true 
    }) 
    // ... 
} 

Hier ist, was die berechnete prop wie folgt aussieht:

message: { 
    get() { 
    return this.auth.message // mapState(['auth']) 
    }, 
    set (value) { 
    this.$store.commit('authMessage', value) 
    } 
} 

Ich bin mir ziemlich sicher, dass das Problem zu tun hat, mit ihm in einem Promise zu sein. Wie kann ich auf berechnete Eigenschaften innerhalb des Firebase Promise zugreifen?

Answer 1

this innerhalb eines Callbacks bezieht sich auf den Callback selbst (oder vielmehr, wie ausgeführt, der Ausführungskontext des Callback), nicht die Vue-Instanz. Wenn Sie this zugreifen möchten müssen Sie entweder außerhalb des Rückruf etwas zuzuweisen:

// Assign this to self 
    var self = this; 

    firebase.auth().signInWithEmailAndPassword(this.email, this.password) 
    .then(function (data) { 
     self.user = firebase.auth().currentUser 
    }).catch(function (error) { 
     self.message = error.message 
     self.hasErrors = true 
    }) 

Oder wenn Sie ES2015 verwenden verwenden, um eine arrow function, die nicht ihre eigenen this Kontext definieren:

firebase.auth().signInWithEmailAndPassword(this.email, this.password) 
    .then(data => { 
     this.user = firebase.auth().currentUser 
    }).catch(error => { 
     this.message = error.message 
     this.hasErrors = true 
    })