Uncaught TypeError: Cannot read property 'apply' of undefined when calling function on parent LWC

Question

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?

Answer 1

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/