VueFireを使ってfirebase pathの一部としてpropを使用するにはどうすればいいですか？

Question

私は食事と呼ばれるfirebaseのオブジェクトのリストを持っています。 このコンポーネントでは、1回の食事に関する情報を表示したいので、idフィールドを小道具として渡して、そのベースをfirebaseから取得したいとします。

これは私が試みたものです。 this.idが未定義たので、それは動作しませんでした：

import db from '@/firebase' 

export default { 
    name: 'meal', 
    props: { 
     id: { 
      type: String, 
      required: true 
     } 
    }, 
    firebase: { 
     meals: db.ref('meals').child(this.id) 
    } 
} 

は私が何か間違ったことをしましたか小道具が初期化される前にfirebaseコールが起こるのでしょうか？

---

EDIT：

私が作成したフックを使ってそれを行うために管理が、それはかなり悪い見えます。他の方法はありますか？

Answer 1

VueFireの公式ドキュメントによれば、作成フックを使用する方法はまさに正しいです。 FirebaseはVue.jsとは基本的に異なるライフサイクルで動作しますので、VueFireで提供されているDoller構文を使用する必要があります。

Answer 2

この1つは私をかなり激しく燃やした。 firebase関数を使用して、次のように変数への参照を作成する必要があります。

import db from '@/firebase' 

export default { 
    name: 'meal', 
    props: { 
     id: { 
      type: String, 
      required: true 
     } 
    }, 
    firebase() { 
     const id = this.$props.id // Pass the reference instead of the prop directly 
     return { 
      meals: db.ref('meals').child(id) 
     } 
    } 
}