1

I have a LWC I am embedding in a flow. The LWC embeds another LWC as a component. (its basically this one: https://live.playg.app/play/custom-carousel-with-lwc ) On the parent LWC my onclick event fires fine. But when I click on the embedded one it gives this error:

Uncaught TypeError: Cannot read property 'apply' of undefined throws at

Any ideas what I am doing wrong? Shouldn't a child LWC be able to invoke a parent function no problem?

my code

5
  • Please include code as text with the code formatting rather than as screenshots - please see How to Ask
    – Dave Humm
    Oct 14, 2020 at 14:44
  • @DaveHumm The page that link goes to says nothing about screenshots vs code text. I feel like that screen shot illustrates this simple problem very well, can you educate me on what advantages including the text adds? Oct 14, 2020 at 14:58
  • If someone else tries to replicate the problem in a dev org the code as text allows them to copy and paste which saves time.
    – Dave Humm
    Oct 14, 2020 at 15:31
  • @DaveHumm - good point! Will do that next time. Just figured out this issue. The child can't call parent JS functions directly. This blog post had the answer: salesforcediaries.com/2019/08/07/… Oct 14, 2020 at 22:24
  • Enabling Lightning Components Debug Mode will give you more descriptive errors. Mar 22, 2021 at 6:50

1 Answer 1

2

The issue was I was trying to call a function on the parent directly from the child and that doesn't work. You need to create a custom event on the child that the parent is listening for like this:

Parent HTML

<c-flow-carousel-component items={items} options={options} onslideclicked={handleSlideClicked}></c-flow-carousel-component>

Parent JS

handleSlideClicked(event) {   
    console.log('in parent handle click' + event.detail);
}

Child HTML

 <div class="slds-carousel__image"  data-index={component.index} onclick={handleSlideClick}>

Child JS

@api slideIndex;
handleSlideClick(event) {
    this.slideIndex = event.currentTarget.dataset.index;
    // Creates the event with the data.
    const selectedEvent = new CustomEvent("slideclicked", {
      detail: this.slideIndex, bubbles:true
    });

    // Dispatches the event.
    this.dispatchEvent(selectedEvent);
  }

Thanks to Sanket Kumar's blog : https://salesforcediaries.com/2019/08/07/lwc-communication-part-2-passing-data-from-child-to-parent-in-lwc/

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .