动态创建vuefire火基准引用

Question

我想在组件中创建一个防火墙引用，其中包含一个传递给它的道具。但是，在组件的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

你是对的。通过在firebase键内嵌套menuCat对象，您已经改变了该对象的上下文。您可以重新分配它，但这可能不是最好的方法。就我个人而言，我会在您的方法钩子中有一个函数来返回firebase对象，您可以随时存储它。另外，在串连字符串方面，建议使用计算的属性--也就是说，您的值已经绑定到this.menuKey属性，并且随着菜单键的更改，它将发生变化--目前作为安装程序，它不会。实际上，如果您愿意，可以将整个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更改时发生更改？如果是这样的话，您需要从this.menuCatter = this.menuCat.categoryName ()函数迁移代码，并使其成为计算属性computed.manuCatter = function () { return ..... }，这样，随着categoryName的变化，代码就会发生变化。