0

So I have a parent component that is using an iteration of child components. When I change something on one Child component I would like it to change something on another Child component in the iteration (in this case a checkbox, just a simple component.set()).

I have tried using Application Level Events, where the child component is sending and handling the event. I just can't find a way to get the other sibling components in the iteration.

Here is some of the boiled down code:

Parent Component:

<aura:iteration items="{!v.verificationsList}" var="ver" aura:id="verificationsList_i"> 
   <lightning:accordionSection name="{!ver.Name}">
   <c.ChildComp/>
</lightning:accordionSection>

Child Component

<aura:component controller="childCompController">
  <lightning:input type="checkbox" label="checkbox1" aura:id="checkbox1" onchange="{!c.changecheckbox1}" checked="{!v.ver.checked}"/>
  <lightning:input type="checkbox" label="checkbox2" aura:id="checkbox2" onchange="{!c.changecheckbox2}" checked="{!v.ver.checked2}"/>
</aura:component>

Lets say there are 2 child records in the iteration. I need one of the check boxes on child component1 to change a different checkbox (checkbox2) on child Component 2.

  • 3
    can you post some markup so that we can assist with your specific implementation? – Mark Pond Jul 11 '18 at 21:21
  • Thanks for the tip @MarkPond. I added a very stripped down version of the code to demonstrate what I'm trying to do – MMeadows Jul 12 '18 at 1:13
  • I was hoping to see the implementation you attempted with Application Events to help troubleshoot why an event being fired wasn't being handled by the siblings – Mark Pond Jul 12 '18 at 15:00
0

Try this pattern:

1) Child fire component event with some payload details.

2) Parent handle comp event and child payload.

3) Parent parse payload and component.find("children") to get a collection of child components

4) Loop through your collection and target which siblings to do something on using details from your payload from original sibling.

| improve this answer | |
  • This worked for me. I sent the event from the selected Child component to the Parent component. Then from the parent Component I matched the desired sibling record in an iteration of the <c.ChildComp/> after giving it an aura:ID. Then I registered an Aura:method from the child component and used that to update the sibling component. – MMeadows Jul 12 '18 at 16:41
0

Why not create a third 'checkbox only' component, use it within your child component instead of lightning:input type="checkbox" and handle the checking off via component level events?

EDIT: Another idea would be to pass in the indexVar from aura:iteration via the onchange event of the checkbox to your controller method, then use component.find() to get an array of checkbox2s, then narrow it down to the specific checkbox because you have the index and set it to checked=true.

Happy to provide sample code if you need it, please let me know.

| improve this answer | |

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.