accessing vue.prototype from component level

Question

So in my main.js file, I have the following set:

Vue.prototype.api_url = 'http://localhost'

and in one of my components: dashboard.vue

I am using the beforeRouteEnter

export default {
data() {
    return {
    }
},
beforeRouteEnter (to, from, next) {
    axios.post(this.api_url + '/dashboard')
}}}

However, I get a TypeError: Cannot read property 'api_url' of undefined

On another component where I'm not using the beforeRouteEnter, I am able to access this.api_url without using an import statement at the component level.

Any thoughts or suggestions?

Raffobaffo · Accepted Answer · 2020-07-10 17:36:33Z

1

In general, to avoid conflict, you need to define and use it with a dollar sign $:

Vue.prototype.$api_url = 'http://localhost'

and

axios.post(this.$api_url + '/dashboard')

UPDATE

As explained here, inside beforeRouteEnter you don't have access to this because the component isn't created yet.

  beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!   },

To access this, you can pass a callback inside next() function, like this:

    beforeRouteEnter (to, from, next) {
        next(that => {
            console.log(that.$api_url );
        })
    }

Update II

as for Sphinx comment down here,

you can import Vue in your dashboard.vue, then directly access Vue.prototype.$api_url

and that will work too, before the component actually mounts.

Hope this helps!

edited Jul 10, 2020 at 17:36

answered Jul 10, 2020 at 16:05

Raffobaffo

2,90611 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

dataviews Over a year ago

facing: TypeError: Cannot read property '$api_url' of undefined

Raffobaffo Over a year ago

Nice :) . Where beforeRouteEnter is placed in your component? Inside a method?

Igor Moraru Over a year ago

this is not yet defined in beforeRouteEnter. use vm.$api_url to access it

dataviews Over a year ago

vm isnt defined either, before next(vm =>{

Sphinx Over a year ago

import Vue in your dashboard.vue, then directly access Vue.prototype.$api_url

|

Collectives™ on Stack Overflow

accessing vue.prototype from component level

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related