Vue.jsのdataオブジェクトを参照する際に Uncaught (in promise) TypeError: Cannot set property 'foo' of undefined

Promiseパターンで返ってくる値を、dataオブジェクトのfooにセットします。

export default {
  name: 'foo',
  data() {
    return {
      foo: ''
    }
  }
...

Promise-pattern(Before)

getData: function() {
  this.$firestore.collection('posts').where('categories.cat', '==', true)
    .get()
    .then(function(querySnapshot) {
      let data = []
      querySnapshot.forEach(function(doc) {
        data.push(doc.data())
      })
      this.foo = data
    })

Uncaught (in promise) TypeError: Cannot set property 'foo' of undefined

「undefinedのfooには何もセットできんぞ！！」と怒られてしまいます。

解決策: thisへのreference用変数(self)をつくる

Promise-pattern(After)

getData: function() {
  let self = this
  this.$firestore.collection('posts').where('categories.cat', '==', true)
    .get()
    .then(function(querySnapshot) {
      let data = []
      querySnapshot.forEach(function(doc) {
        data.push(doc.data())
      })
      self.foo = data
    })

無事、dataオブジェクトのfooに対して返り値をセットすることができました。
thisや変数のscope範囲を理解していないとハマります...。

参考リンク

• javascript, promises, how to access variable this inside a then scope
  https://stackoverflow.com/questions/32547735/javascript-promises-how-to-access-variable-this-inside-a-then-scope