firestoreからgetで取得してnuxtのdataプロパティに渡す方法

Question

data: function () {
    return {
      room_title: '',
    }
  },
created() {
    this.room_id = this.$route.params.id
    const db = firebase.firestore()
    var docRef = db.collection("room").doc(this.room_id)
    docRef.get().then(function(doc) {
        var room_data = doc.data()
        this.room_title = room_data.title
    }
  },

roomからtitleをとってきたいのですがthenでとってくるとその後dataになかなか渡せず。。。firestoreで取得してきたものをdataプロパティにわたすのはどうやったらいいでしょうか？

Answer 1

arrow function を使っていないので、 this.room_title = room_data.title の箇所が問題になっています。
以下を参考に this の扱いに慣れておくとよいと思います。
https://jsprimer.net/basic/function-this/#function-without-arrow-function-this

以下のように書けば動くと思います。

    docRef.get().then(doc => {
        var room_data = doc.data()
        this.room_title = room_data.title
    })

以前も同様の質問をされています。
https://teratail.com/questions/216793

Comments

[you88]

ありがとうございます。thisについてもう少し勉強してみます