vue.jseventsvuejs2emit

Vue cunstom event with parameter returns undefined


I have parent and component in Vue application. Childe componentt needs to emit custom event to the parent and send him some parameter. Child looks like

<b-button
    v-if="type === 'removed' && campaign && !campaign.authorized"
    class="is-fullwidth"
    type="is-primary"
    :loading="deleteBtnLoading"
    @click="updateDeleted($event, false)"
    >{{
        click
    }}</b-button
>

updateDeleted(e, save = false) {
    console.log(e);  // This works
    console.log(save);  // This works
    this.$emit('updateDeleted', save);
}

The parent component is not able to catch save value. The code looks like

<DraftChangedModal
    type="removed"
    :devices="removedModalDevices"
    :campaign="campaign"
    :user="user"
    @updateDeleted="updateDraftDeleted(save)"
/>

async updateDraftDeleted(e, save) {
    console.log(e);  // undefined
    console.log(save);  // undefined
},

What am I doing wrong? Thanks for any help.


Solution

  • It doesn't matter how function parameters are named in async updateDraftDeleted(e, save) function signature. If it was provided with undefined arguments when being called, parameters are undefined.

    updateDraftDeleted(save) expression uses save property that is local to a component that has this template. If there is no this.save, save argument is undefined.

    There is the special $event variable that is available for expressions that are bound to events. This should be done in the parent the same way as in the child:

    @updateDeleted="updateDraftDeleted($event)"