[Vuejs]-Create vuefire firebase reference dynamically

by

0👍

✅

You are correct. By nesting the menuCat object inside the firebase key, you have shifted the context of this. You can re-assign it, but that’s not perhaps the best approach. Personally, I would have a function in your methods hook that returns the firebase object, which you can stash at any point you wish. Also, in terms of concatenating strings, suggest using computed properties – that way your value is already bound to the this.menuKey property and it will change as the menu key changes – currently as setup, it will not. In fact, you could just return whole firebase object as a computed property if you like, eg: 

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()
  }
}

I may not quite have followed your logic entirely, but you’ll get the gist.

Lastly, are you expecting this.manuCatter to change when categoryName changes? If so, you’ll need to migrate code from your ready() function this.menuCatter = this.menuCat.categoryName and make it a computed property computed.manuCatter = function () { return ..... } That way it will change as categoryName changes.

Leave a comment