Can't access $route params in .vue component

[srobertson421]

Currently I'm having difficulty accessing any $route params from vue-router in order to utilize the params for vuefire queries. It seems like the vuefire property is tied to to a different context rather than the VueComponent context that other component hooks utilize.

Here is some code to explain:

My view component that needs access to the $route.params. This is what I'd hoped to use:

<template>
  <h1>{{job.title}}</h1>
</template>

<script>
  import db from '../services/firebase-service.js';

  export default {
    data() {
      return {

      }
    },
    firebase: {
      job: {
        source: db.ref('jobs/' + this.$route.params.id),
        asObject: true
      }
    }
  }
</script>

<style></style>

While currently I am doing this as a workaround, utilizing the global location object:

<template>
  <h1>{{job.title}}</h1>
</template>

<script>
  import db from '../services/firebase-service.js';

  export default {
    data() {
      return {

      }
    },
    firebase: {
      job: {
        source: db.ref('jobs/' + location.pathname.substring(5, location.pathname.length)),
        asObject: true
      }
    }
  }
</script>

<style></style>

Since the "firebase" property is applied on the component level I assumed it would also be referencing the VueComponent context but instead it references a different context like this:

"{
  "default":{
    "firebase":{
      "job":{"asObject":true}},
      "__file":"/Users/seanrobertson/Projects/vue-spa/src/pages/JobShow.vue",
      "staticRenderFns":[],
      "beforeCreate":[null],
      "beforeDestroy":[null]
    }
}"

Is there a way to reference the current component context from within the firebase property? I have looked at #10 but I'm not sure it's applicable as I am using npm and webpack. Any help would be appreciated as I'm not too keen on the location hackery.

[DaBs]

Take a look at whether #25 fixes your problem. I believe it should. It allows you to do

firebase() {
   // this now references the component, just like calling data() would.
}

// Or following your original attempt:

  import db from '../services/firebase-service.js';

  export default {
    data() {
      return {

      }
    },
    firebase() {
      return { 
        job: {
            source: db.ref('jobs/' + this.$route.params.id),
            asObject: true
        }
      }
    }
  }

[posva]

Doing this out of a function refers to the window object.
As @DaBs said, you can use a function instead of an object to access the vm

[srobertson421]

Ah awesome, I guess I misunderstood. Thanks @posva and @DaBs !!!

[Kimeiga]

Hey all! Sorry I might be missing something but when trying this I am just left with an empty object:

<template>
  <div>
    {{ $route.params.id }}
    {{ JSON.stringify(eventData) }}
  </div>
</template>

<script>
import { db } from "../db";

export default {
  data() {
    return {
      eventData: {},
    };
  },
  firebase() {
    return {
      eventData: {
        source: db.collection("events").doc(this.$route.params.id),
      },
    };
  },
};
</script>

Is there a different way that we are supposed to be getting the data when its coming from firebase()?

[Kimeiga]

Ok I think what fixed it was to use the following instead of firebase()

firestore() {
  return {
    eventData: db.collection("events").doc(this.$route.params.id),
  };
},