I have a parent component, which contains 2 re-usable components. I am not sure how to fetch them in parent.
Parent Component
<template>
<lightning-card title="Case Reason">
<div class="slds-form slds-form_stacked slds-var-m-around_xx-large">
<c-cs_autocomplete
onselectionchange={handleReasonChange}
label="Case Reason"
>
</c-cs_autocomplete>
<c-cs_autocomplete
onselectionchange={handleResolutionChange}
label="Case Resolution"
>
</c-cs_autocomplete>
<lightning-button label="Clear" onclick={handleClear}></lightning-button>
<lightning-button variant="brand" label="Submit" onclick={handleSubmit}></lightning-button>
</div>
</lightning-card>
Parent controller
handleReasonChange(event) {
// Call Apex endpoint to search for records and pass results to the lookup
search(event.detail)
.then((results) => {
this.template.querySelector('c-cs_autocomplete').setSearchResults(results);
})
.catch((error) => {
this.notifyUser('Lookup Error', 'An error occured while searching with the lookup field.', 'error');
// eslint-disable-next-line no-console
console.error('Lookup error', JSON.stringify(error));
this.errors = [error];
});
}
If I fetch child component using this.template.querySelector('c-cs_autocomplete')
, the component could be one of child components randomly.
Is there a way to fetch specific child component?