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

Vueponent('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: ,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.

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

Vue.ponent('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./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.

• javascript
• vue.js

1 Answer 1

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>