How to import firebase reference from a method inside another component?

Question

I am import a firebase at the top of my /buildings.vue component:

...
import buildingsadd, { buildingsRef } from './buildingsadd.vue';


export default {
  firebase() { 
    return { 
    buildings: buildingsRef
    }
  },
  components: {
    buildingsadd
  },
  name: 'buildings',
  ...

On the the /buildingsadd.vue component I am defining a new path to the the firebase ref like this:

...
import firebase from '../firebase-config';
import { db } from '../firebase-config';
export default {
  firebase() { 
    return {
    buildings:  buildingsRef,
    users: usersRef,
    }
  },
  name: 'buildingsadd',
  data () {
    return {
      newBuilding: {
        name: '',
      } 
    }
  },
  methods: {
    addBuilding: function () {
      let userId = firebase.auth().currentUser.uid;
      let buildingsRef = db.ref('buildings/'+userId);
    }
...

But I am getting this errors:

any ideas?

Answers to this would also solve my particular problem:

• Is it possible to define a variable on the firebase database references path?

  Vue.JS "for loop" is not displaying the items on firebase if I use the following firebase rules?

  Is it possible to bring the "user" object to the "top level" and access it from outside the "on.AuthSateChanged(user => .... }"?

  How to constrain read/write rules to the users that create the nodes while keeping this structure?

Answer 1

You are not exporting buildingsRef. Export it like below.

buildingsadd.vue:

import firebase from '../firebase-config';
import { db } from '../firebase-config';

let userId = firebase.auth().currentUser.uid;                  // added
export let buildingsRef = db.ref('buildings/'+userId);         // added

export default {
  // ... (all the same)
  methods: {
    addBuilding: function () {
                                                               // removed lines here
    }
...