javascript - 我如何使用 VueFire 将 prop 作为 firebase 路径的一部分？

Question

我在 firebase 中有一个称为膳食的对象列表。在此组件中，我只想显示一顿饭的信息，因此我传递一个 id 字段作为 Prop ，并且我只想从 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 调用是否在 props 初始化之前发生？

<小时/>

编辑:

我设法使用创建的钩子(Hook)来做到这一点，但它看起来很糟糕。还有其他办法吗？

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

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