Fire a Child LWC Method From Parent LWC

Question

PARENT COMPONENT

parent.html

<lightning-button variant="brand" label="Select" title="Select Family"
data-id={fam.accountId} onclick={handleSelectFamily}
class="slds-m-left_x-small"></lightning-button>

parent.Js

handleSelectFamily(event)
{
    this.accountId = event.currentTarget.dataset.id;
    alert('if');
    this.template.querySelector("c-transaction-Invoice-Payment").handlePayments();           
    alert('end');
}

CHILD COMPONENT

TransactionInvoicePayment.Js

@api handlePayments() {
    console.log('IN handlePayments');
}

Trying to pass and trigger the child method from the parent LWC, but it doesn't trigger. Tried by doing alert only the first alert is prompting, Checked in console log too no error occurs.

Can you please help me with what I am missing here. Thanks

Answer 1

I think the most likely source of error is your capitalization in the querySelector.

You have this.template.querySelector("c-transaction-Invoice-Payment").handlePayments();

But I suspect it's more likely to be:

this.template.querySelector("c-transaction-invoice-payment").handlePayments();