Value of 'this' for VueJs 2 in promise [duplicate] - vuejs2

Question

This question already has answers here:
Scope of this in javascript function
(3 answers)
Closed 4 years ago.
Learning Vue for a simple admin panel project. I cannot access my Vue instance local variables in a method's returned promise using 'this'.
I am only able to access it by directly calling the vue instance itself. is this the correct way to handle this.
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
const db = firebase.firestore()
const auth = firebase.auth()
const currentUser = auth.currentUser
// firebase collections
const categoryCollection = db.collection('predefinedCategories')
var example2 = new Vue({
el: '#components-demo',
data: {
message: 'Message',
},
methods: {
initMessage: function () {
categoryCollection.get().then(
function(querySnapshot) {
message = querySnapshot.forEach((doc) => {
console.log(doc.id, " => ", doc.data(), doc.data().name);
console.log(example2.$data.message);
console.log(this.data.message);
});
});
},
checkMessage: function () {
console.log(this.message);
}
}
})
console.log(this.data.message) should give me 'Message'. Instead it gives me undefined.

Answer 1

The this in the .then() callback no longer refers to your Vue instance, because it is scoped in a function. You can of course proxy it to another variable, but since you are using ES6 already, you can use arrow function. The major advantage of arrow function is that it preserves the lexical this.
Also, if you want to refer to the app's message data, it should be referenced as this.message and not this.data.message.
initMessage: function () {
categoryCollection.get().then(querySnapshot => {
message = querySnapshot.forEach(doc => {
console.log(this.message);
});
});
},