javascript - 如何使用 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)
    }
}

我做错了什么还是在初始化道具之前发生了firebase调用？

---

编辑：

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

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

Answer 2

根据 VueFire 的官方文档，您使用创建钩子的方式是完全正确的。Firebase 基本上与 Vue.js 在不同的生命周期中工作，因此您需要使用 VueFire 提供的doller 语法。