Can't get access to $root in Vue.js

Question

In my application I have a root page. In this root page I include Navbar component from which I try to get access to variable named currentRoute. My index.js, where I defined currentRoute:

import Vue from 'vue';
import routes from './routes';

var app = new Vue({
    el: '#app',
    data: {
        currentRoute: window.location.pathname,
    },
    computed: {
        ViewComponent () {
            return routes[this.currentRoute] || routes.NotFound;
        }
    },
    render (h) {
        return h(this.ViewComponent)
    }
});

window.addEventListener('popstate', () => {
    app.currentRoute = window.location.pathname;
});

I have home.vue which is default route and where I included a component named Navbar where I try to get access to currentRoute and which looks like:

<template lang="jade">
.navbar
    .row
        .col.text-center
            a.post-outline.navbar--icon(href='/new-post', @click="newPost")
        .col.text-center
            i.email-outline.navbar--icon
        .col.text-center
            i.person-outline.navbar--icon
</template>

<script>
import routes from '../../routes';
export default {
    props: {
        href: String,
        required: true
    },
    computed: {
        isActive () {
            return this.href === this.$root.currentRoute
        }
    },
    methods: {
        newPost: event => {
            event.preventDefault();

            this.$root.currentRoute = this.href;

            window.history.pushState(
              null,
              routes[this.href],
              this.href
            )
        },
    },
}
</script>

My routes.js:

import NotFound from './pages/404.vue';
import Home from './pages/home.vue';
const NewPost = { template: '<p>new post page</p>' }

export default {
    '/': Home,
    '/new-post': NewPost
}

Everything works fine but this.$root is undefined. Why and where is my mistake?

Possible duplicate of VueJS: why is "this" undefined?

thanksd
– thanksd

2017-05-12 05:07:51 +00:00
Commented May 12, 2017 at 5:07 — thanksd
– thanksd, Commented May 12, 2017 at 5:07

thanksd · Accepted Answer · 2017-05-01 13:19:17Z

1

Your method newPost() uses the ES6/2015 arrow function syntax (() => {}), which binds this to the parent context. In your case, the parent context is the module and not the Vue instance, so it doesn't have a reference to the $root.

You need to use to either declare the function normally:

newPost: function(event) { }

Or, you can use the ES6/2015 shorthand:

newPost(event) { }

answered May 1, 2017 at 13:19

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

1 Comment

rel1x Over a year ago

Oh my god! Thanks a lot!

Krasimir Hristozov · Accepted Answer · 2017-05-01 13:06:43Z

0

In vue.js, data is passed from parent to children via props. It's passed by reference so if you change it in the child, it would affect the parent state.

answered May 1, 2017 at 13:06

Krasimir Hristozov

1113 bronze badges

Collectives™ on Stack Overflow

Can't get access to $root in Vue.js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related