3

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?

1 Answer 1

10

When you have multiple child components called inside a parent and you want to query a specific component, you can do it via various ways:-

  1. using HTML data-* Attribute

let's say a parent is having two input fields. Assign different data-id to both of them

    <lightning-input type="text" label="Enter Product Number" data-id="nine digit product number" >
    </lightning-input>
    <lightning-input type="text" label="Enter Product Number" data-id="ten digit product number" >
    </lightning-input>

In javascript, You can query a particular input field as below:-

this.template.querySelector('lightning-input[data-id="ten digit product number"]');
  1. using different class name

     <lightning-input type="text" label="Enter Product Number" class="field1">
     </lightning-input>
     <lightning-input type="text" label="Enter Product Number" class="field2">
     </lightning-input>
    

In javascript, You can query a particular input field as below:-

this.template.querySelector('.field1');
  1. You can also use querySelectorAll to access all child elements and do a filter based on some public property of the child.
this.template.querySelectorAll('lightning-input').forEach(element => {
     if (element.label === 'some value') {
            //do something
      }
});
1
  • 1
    thanks @sanket...i would go the data-id way :)
    – ipradhansk
    Aug 18, 2020 at 11:31

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.