I would like to execute a function of my parent component from the child component, dynamically. I have a variable where I have the name of the function that I want to execute.
I have tried the following way but I can't.
<script src="https://unpkg.com/vue"></script>
<template id="child-template">
<span @click="someMethod">Click me!</span>
</template>
<div id="app">
<child></child>
</div>
<script>
Vue.component('child', {
template: '#child-template',
data: function () {
return {
modulo: 'msj1',
}
},
methods: {
someMethod(){
this.$parent.(this.modulo);
}
}
});
var app = new Vue({
el: '#app',
methods: {
msj1(){
alert('mensaje 1');
},
msj2(){
alert('mensaje 2');
},
}
});
</script>
You just have to wrap the call to the function (using
[]
to access the method by name and()
to make the call):https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Parent-Component-Instance