Calling a parent function from a child component r…

I have a navigation drawer child component inside my parent component.

MainComponent.vue

<template>
<v-app>
<div>
    <NavigationComponent></NavigationComponent>
</div>
</v-app>
</template>

Now, in the child component (Navigation drawer), I tried to call a function from the MainComponent by doing:

this.$parent._appendUser(arr);

I have a similar parent-child component that calls a function from parent to child, but I don’t know why this one gives me an error saying:

TypeError: this.$parent._appendUseris not a function

Parent Component – MainComponent.vue

<template>
<v-app>
<div class="container" style="padding: 0 !important">
<div class="row">
</div>
<AddInstrumentDrawer :add_instrument_drawer_watcher="add_instrument_drawer_watcher"></AddInstrumentDrawer>
</div>
</v-app>
</template>

<script>
import AddInstrumentDrawer from './shared/AddInstrumentDrawer.vue'

export default {
    name: 'user-profile',
    components: { AddInstrumentDrawer },
    data: () => ({
        profile_image_drawer_watcher: 1,
        add_instrument_drawer_watcher: 1,
    }),
    methods: {
        appendinstrument(arr) {
            alert(arr);
            /*for (let i = 0; i < arr.length; i++) {
                this.profile_data.instruments.push(arr[i]);
            } */
        },
    }
}
</script>

Child Component

<template>
<v-app>
<div>
<v-navigation-drawer v-model="add_drawer" fixed temporary right width="600"
        disable-resize-watcher disable-route-watcher
        style="z-index: 101 !important">
    <div class="drawer-footer">
        <div class="drawer-footer-content-2">
            <button type="button" class="btn mx-1" @click="test()">Save changes</button>
        </div>
    </div>
</v-navigation-drawer>
</div>
</v-app>
</template>

<script>
    
export default {
    name: 'add-instrument-drawer',
    components: {  },
    props: ['add_instrument_drawer_watcher'],
    data: () => ({
        add_drawer: false,
    }),
    watch: {
        add_instrument_drawer_watcher: function(n, o) {
            this.add_drawer = !this.add_drawer;
        },
    },
    methods: {
        test() {
            this.$parent.appendinstrument('test');
        },
    },
}
</script>

Answer

You shouldn’t call parent method using this.$parent.someMethod() but you have to emit a custom event from child component to the parent one which has the parent method as handler :

   <AddInstrumentDrawer 
     @append-instrument="appendinstrument"

     :add_instrument_drawer_watcher="add_instrument_drawer_watcher"></AddInstrumentDrawer>

in child component :

    methods: {
        test() {
            this.$emit('append-instrument','test');
        },
    },

Calling a parent function from a child component raises an error in Vue.js

Advertisement

Answer