0

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

1 Answer 1

2

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();

2
  • tried this.template.querySelector("c-transaction-invoice-payment").handlePayments(this.accountId, this.transactionId); still no luck May 11, 2021 at 12:18
  • Can you put the html markup showing the parent compoent and the child component up? Another way you can query for the component is to put a css class on it and query for that. Also, you don't happen to be using a namespace do you? May 11, 2021 at 17:28

You must log in to answer this question.

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