1

I have a Parent and a child component. I am trying to dispatch an event from child and capture it in parent component. However I get the event as 'undefined' in parent. What am I doing wrong here?

Parent HTML:

<template>
    <lightning-layout multiple-rows>
        <lightning-layout-item size="12">
            <lightning-card title="Sample App">
                <p class="slds-var-p-horizontal_small">
                    <c-child onsearch={searchItem}></c-child>
                </p>
            </lightning-card>
        </lightning-layout-item>
    </lightning-layout>
</template>

Parent JS:

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
    itemId = '';

    searchItem(event) { 
        console.log('Event received => ' + console.log(event));
        this.itemId = (event && event.detail && event.detail.eventItemId) || '';
        console.log('itemId received => ' + console.log(this.itemId));
    }
}

Child HTML:

<template>
    <lightning-layout>
        <lightning-layout-item class="slds-align-middle slds-text-align_left">
            <lightning-combobox class="slds-align-middle slds-text-align_left" name="" value={selectedOptionId}
                options={options} onchange={handleChange}>
            </lightning-combobox>
        </lightning-layout-item>
    </lightning-layout>
</template>

Child JS:

import { LightningElement } from 'lwc';

export default class Child extends LightningElement {
    selectedOptionId='';
    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }
    handleChange(event) {
        this.selectedOptionId = event.detail.value;
        console.log('handleChange option selected ===> ' + this.selectedOptionId);
        const searchEvent = new CustomEvent('search', {
            detail: {
                eventItemId: this.selectedOptionId
            }
        });
        this.dispatchEvent(searchEvent);
    }
}

In console log I see:

enter image description here

5
  • This could mean your payload is not getting delivered have you tried isolating the issue by sending simple data? For example just send detail:'dummyText'? Also just out of curiosity I'm not sure why you are adding a console within a console?
    – d_k
    Jul 19, 2020 at 15:15
  • I used this - const searchEvent = new CustomEvent('search', { detail: { eventItemId: 'dummyText' } }); However I see the same result. Is that what you were thinking to try?
    – SfdcBat
    Jul 19, 2020 at 15:23
  • 3
    Your logging is wrong. Try console.log("event received => ", event);
    – Phil W
    Jul 19, 2020 at 15:24
  • No just this.dispatchEvent(new CustomEvent('search', { detail: 'dummyText' }));
    – d_k
    Jul 19, 2020 at 15:26
  • Ah that was the mistake. I was using double console.log. Thanks for pointing it out. I could select that as answer if you wish to add your answer.
    – SfdcBat
    Jul 19, 2020 at 15:28

1 Answer 1

0

Due to incorrect use of console.log() I was getting the values as undefined.

Incorrect usage:

console.log('Event received => ' + console.log(event));
this.itemId = (event && event.detail && event.detail.eventItemId) || '';
console.log('itemId received => ' + console.log(this.itemId));

Please check the comments sections for more details.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.