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

12

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

You must log in to answer this question.

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