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.
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)"