How can I access a parent method from child component in Vue.js?

Question

I am trying to call a parent/root level method on a child component in Vue.js, but I keep getting a message saying TypeError: this.addStatusClass is not a function.

Vue.component('spmodal', {
    props: ['addStatusClass'],
    created: function() {
        this.getEnvironments();
    },
    methods: {
        getEnvironments: function() {
            this.addStatusClass('test');
        }
    }
});

new Vue({
    el: '#app',
    methods: {
        addStatusClass(data) {
          console.log(data);
        }
    }
});

Here is a full JSBIN example: http://jsbin.com/tomorozonu/edit?js,console,output

If I call this.$parent.addStatusClass('test'); it works fine, but based on the Vue.js documentation, this is bad practice and I should be using props which is not working.

Linus Borg · Accepted Answer · 2016-04-30 12:29:22Z

6

specifying the prop does nothing on its own, you have to actually pass something to it from the parent - in this case, the function.

<spmodal :add-status-class="addStatusClass"></spmodal>

answered Apr 30, 2016 at 12:29

Linus Borg

24k7 gold badges65 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

How can I access a parent method from child component in Vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related