动态创建vuefire火力点引用

我想在包含传递给它的道具的组件内创建Firebase引用。然而，似乎在组件的firebase属性中，'this'不像其他组件那样绑定到VM。我解释正确吗？如果有的话，任何人都可以想到解决办法？如果没有，如果可以提供示例，将不胜感激。动态创建vuefire火力点引用

以下是我在组件脚本中尝试执行的一个简单示例。

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

来源

2016-04-30 Matthew Miller

你是对的。通过将menuCat对象嵌套在Firebase密钥中，您已经移动了该内容。你可以重新分配它，但这可能不是最好的方法。就我个人而言，我会在你的方法钩子中有一个函数返回firebase对象，你可以在任何你想要的地方隐藏它。此外，就连接字符串而言，建议使用计算属性 - 这样，您的值已绑定到this.menuKey属性，并且它将随菜单键更改而改变 - 当前为设置，不会。事实上，你可以只返回整个火力对象作为一个计算的属性，如果你喜欢，如：

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更改而变化。

来源

2016-05-03 03:53:27

谢谢我实际采取了一个稍微不同的路径。我使用了firebase钩子来建立我的基础引用，然后我需要动态地使用它，我使用了类似这样的东西。$ firebaseRefs.menuCat.child（whatever）etc ... –

动态创建vuefire火力点引用

回答

相关问题