如何使用道具作爲使用VueFire的Firebase路徑的一部分？

Question

我有一個firebase中的對象列表叫做飯菜。 在這個組件中，我只想顯示一頓飯的信息，所以我傳遞一個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) 
    } 
} 

難道我做錯事或不道具被初始化前的火力調用發生？

---

編輯：

我設法使用創建掛鉤做到這一點，但它看起來很糟糕。有沒有其他方法？

created() { 
     this.$bindAsObject('meal', db.ref('meals').child(this.id)) 
    } 

Answer 1

根據VueFire的官方文檔，您使用創建掛鉤的方式是完全正確的。 Firebase基本上與Vue.js在不同的生命週期中工作，因此您需要使用VueFire提供的doller語法。

Answer 2

這一個讓我很難受。你必須使用火力點功能，並創建一個像這樣的變量的參考：

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) 
     } 
    } 
}