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 '20 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? – Mike Letulle Oct 14 '20 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 '20 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/… – Mike Letulle Oct 14 '20 at 22:24
  • Enabling Lightning Components Debug Mode will give you more descriptive errors. – Kennedy Nyaga Mar 22 at 6:50
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/

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.