5

I declared a parentComponent with an attribute of type list. I am passing that list to child component.

In my child component, I am iterating over that list using aura:iteration . Also I provided a button in child component to new elements to the list I got from parent compoent, I am able to add it. but then aura:iteration doesn't render the newly updated value.

If I just use the child component, the aura:iteration re-rendring works.

Cant we update the parent component's value from child component? If so why aura:iteration not showing updating value?

here is my minimum viable code to reproduce this issue.

childComponent.cmp

<aura:component >
    <aura:attribute type="List" name="myList" default="[]"></aura:attribute>

    <aura:iteration items="{!v.myList}" var="ele" indexVar="count">

        {!count}<br></br> 
    </aura:iteration>
    <lightning:button variant="brand" label="addNewElement" title="addNewElement" onclick="{!c.addNewElement }"/>
</aura:component>

ChildComponentController.js

({
    addNewElement : function(component, event, helper) {
        let retList=component.get("v.myList");
        retList.push({}); //Adding new element
        component.set("v.myList", retList);  
        console.log('pushed'+retList.length);
    }
})

ParentComponent.cmp

<aura:component >
    <aura:attribute type="List" name="myList" default="[]"></aura:attribute>

    <c:childComponent myList="{!v.myList}"></c:childComponent>
</aura:component>

That being said, pressing the addNewElement button, adds element in child element, no matter how many time you press that button, but in case when its embeded in parent component, the aura: iteration rerenders only once.

Update : As suggested by Raul, i tried {#v.myList} while passing value to child component. It works, but same values are not reflected back to parent, (Which is the behaviour of unbound expression).

  • 1
    Something to do with bound expression, with unbound expression it works fine. <c:Child_221129 myList="{#v.myList}"/> – Raul Jun 11 '18 at 11:33
  • 1
    HI @Raul this works,I don't know why. Anyways I need bi-directional data binding, so cant use #. – Pranay Jaiswal Jun 11 '18 at 11:39
  • Did You tried to give diffrent names to attributes, maybe myList in child and parent are confilicting in someway? – patryk Jun 11 '18 at 17:54
  • Hi @pepper42 I tried with different name, same issue. – Pranay Jaiswal Jun 11 '18 at 19:45
  • Shot in the dark but instead of using binding, send an event with the update to the parent. I remember reading way back when components came out that this is the preferred way to communicate with parents, not sure if that is still true. – gNerb Oct 16 '18 at 17:54
1

I got a similar issue before. The workaround for me is to new an empty list and push all elements into the new list. Then, set the attribute with the new list.

I guess the Aura framework detects the internal store address change or not to decide whether the attribute gets changed, thus rerender the components.

0

There is a known issue with data binding when using Sobject data types. I'm not sure if that is affecting the other non primitive types too. For more info please click the below link.

Two way data binding between components does not work as expected when dealing with ‘object’ data types

  • Hi @Rajesh, Thanks for providing the known issue, but the one I mentioned is related to aura: iteration. And I am using primitive data-types which still has issue. (The one you mentioned works fine with primitive data-type). That being said, I am able to set values in attribute, its just aura:iteration not re-rendering. – Pranay Jaiswal Jun 11 '18 at 15:30

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.