Question

我想在组件中创建一个firebase引用，其中包含传递给它的prop。但是，似乎在组件的firebase属性中，'this'不像其他组件那样绑定到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键中，您已经改变了它的上下文。你可以重新分配它，但这可能不是最好的方法。就个人而言，我会在你的方法钩子中有一个函数，它返回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()
  }
}

我可能没有完全遵循你的逻辑，但你会得到要点。

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

动态创建vuefire firebase引用

1 个答案: