nuxtのdataに関数内から代入したい

<script>
import firebase from '@/plugins/firebase'
export default {
  data: function () {
    return {
      room_title: '',
      room_id: ''
    }
  },
  created() {
    const room_id = this.$route.params.id
    const db = firebase.firestore()
    const docRef = db.collection('room').doc('id')
    docRef.get().then(function (doc) {
        if (doc.exists) {
            this.room_title = "あばば"
            console.log("Document data:", doc.data().room_title)
        } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
        }
    }).catch(function(error) {
        console.log("Error getting document:", error);
    })
  }
}
</script>

上記でthis.room_title = "あばば"ここからroom_titleに値をいれてviewにroom_titleをだしたいのですが関数内からできません。どうすればいいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript の this は特別なキーワードで、関数内ではその関数の呼び出し方等によって格納している値が変わってしまいます(参考)。

したがって、以下のコード内コメントのとおり、関数内の this が Vue インスタンスとは別物になっており、意図通りに動作していないものと思われます。

javascript
1created() {
2    // ...略... //
3    // ここでは、まだ this は Vue インスタンス
4    docRef.get().then(function (doc) {
5    //                ↑別の関数内に入っため、 this が別の値に
6        if (doc.exists) {
7            this.room_title = "あばば"
8            // ↑ この this は別の値 (おそらく undefined )
9        }
10    }
11}

対策としては、以下の二つが考えられます。

あらかじめ別の変数に格納しておく
関数の代わりにラムダ式(アロー関数)を利用する

↓方法1

javascript
1created() {
2  // ...略... //
3  const _this = this // ここで別の変数に格納
4  docRef.get().then(function (doc) {
5    if (doc.exists) {
6      _this.room_title = "あばば"
7      // ↑ this の代わりに _this を使う
8    }
9  })
10}

↓方法2

javascript
1created() {
2  // ...略... //
3  docRef.get().then(doc => {
4  //                ↑ラムダ式なら this の値が変わらない
5    if (doc.exists) {
6      this.room_title = "あばば"
7    }
8  })
9}