动态创建 vuefire firebase 引用

Question

我想在一个组件中创建一个 firebase 引用，该组件包含一个传入的 prop。但是，似乎在组件 'this' 的 firebase 属性中没有像其他组件那样绑定到 VM。我的解释正确吗？如果是这样，有人能想到解决办法吗？如果没有，请提供示例，将不胜感激。

这是我在组件脚本中尝试执行的操作的简单示例。

<script>

import Firebase from 'firebase'
import menuItem from 'menuItem.vue'

export default {
    ready() {
        this.menuCatter = this.menuCat.categoryName
    },
    data () {
        return {
            menuCatter: ''
        }
    },
    props: {
        menuKey: {
            type: String,
            required: true
        }
    },
    firebase: {
        menuCat: {
            source: new Firebase('https://bluehill.firebaseio.com').child('menuCats/' + this.menuKey),
            asObject: true
        },
    },
    methods: {
        updateCat(){
            let self = this

                self.$firebaseRefs.menuCat.update({categoryName: self.menuCatter})
        },
    components: {
        menuItem
    }
}

</script>

Answer 1

你是对的。通过将 menuCat 对象嵌套在 firebase 键中，您已经改变了它的上下文。您可以重新分配它，但这可能不是最好的方法。就我个人而言，我会在您的方法挂钩中有一个函数 returns firebase 对象，您可以将其存储在任何您希望的位置。此外，就连接字符串而言，建议使用计算属性 - 这样你的值已经绑定到 this.menuKey 属性并且它会随着菜单键的变化而变化 - 目前作为设置，它不会。事实上，如果您愿意，您可以 return 整个 firebase 对象作为计算的属性，例如：

computed: {
  menuCat () {
    return 'menuCats/' + this.menuKey
  },
  fbRef () {
    return {
      source: new Firebase('https://bluehill.firebaseio.com').child(this.menuCat),
      asObject: true
    }
  }
},
methods: {
  updateCat () {
    this.$options.firebaseRef = fbRef()
  }
}

我可能没有完全遵循您的逻辑，但您会明白要点的。

最后，您是否希望 this.manuCatter 在 categoryName 更改时更改？如果是这样，您需要从 ready() 函数 this.menuCatter = this.menuCat.categoryName 迁移代码并使其成为计算属性 computed.manuCatter = function () { return ..... } 这样它会随着 categoryName 的变化而变化。

动态创建 vuefire firebase 引用

Create vuefire firebase reference dynamically

vue.js