Question

我在firebase中有一个名为meal的对象列表。在这个组件中，我想只显示一餐的信息，所以我通过一个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

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

Answer 2

这个让我很难受。您必须使用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)
        }
    }
}

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

2 个答案: