4

Let me start by showing you what I am doing.

ParentAppWithListAttr.app

<aura:application >
    <aura:attribute type="List" name="justAList" default="['hello','world']"/>

    <aura:handler name="change" value="{!v.justAList}" action="{!c.justLog}"/>

    <aura:iteration items="{!v.justAList}" var="item">
        <p>{!item}</p>
    </aura:iteration>

    <aura:iteration items="{!v.justAList}" var="item">
        <c:ChildForEachElementInList justAnItem="{!item}"></c:ChildForEachElementInList>
    </aura:iteration>

</aura:application>

ParentAppWithListAttrController.js

({
    justLog : function(component, event, helper) {
        console.log("old value: " + event.getParam("oldValue"));
        console.log("current value: " + event.getParam("value"));
    }
})

ChildForEachElementInList.cmp

<aura:component >
    <aura:attribute type="String" name="justAnItem"/>
    <p>Item: {!v.justAnItem}</p>

    <lightning:button variant="base" label="Click child" onclick="{!c.changeAttr}"/>

</aura:component>

ChildForEachElementInListController.js

({
    changeAttr : function(component, event, helper) {
        component.set("v.justAnItem", "cool");
    }
})

Now when I click Click child we can notice that the child component attribute gets updated. While the parent attribute does not. And that is the issue.

What am I missing here? Why parent attribute does not get updated and no console output is produced due to the change handler?

enter image description here enter image description here

Thank you.

  • Something similar, I faced, here: salesforce.stackexchange.com/questions/221129/… – Pranay Jaiswal Dec 23 '18 at 4:23
  • I think this is an inherent misuse of the console.log. You should be using a variable/array to store old values if you want to track the state of the component between clicks. – crmprogdev Dec 25 '18 at 14:02
  • @crmprogdev, thank you. I do not understand you. Could you, please, elaborate? Because I am using an array in my example: <aura:attribute type="List" name="justAList" default="['hello','world']"/>. And also I am not interested in storing or tracking old values. The perseverance of old data in parent component`s aura:attribute is the issue here. The data in parent component is not updated, while I would expect it to be updated. – oobarbazanoo Dec 25 '18 at 14:10
  • Components need to talk with one another using a mechanism. I don't see where you've defined any Aura Events. That could be one issue with things not updating between components. Only problem with that approach is Events are available to all components in Window (& more). Another approach is "bubbling". How they bubble depends on stacking order in the Container and references between each component. Do those references exist? The console.log is not the place to create references as part of a function. You're expecting to "bubble down" instead of "up" without a reference to parent from child. – crmprogdev Dec 25 '18 at 14:28
  • @crmprogdev, aura:attribute is the mechanism here. According to the documentation ! denotes a bi-directional data binding, while # denotes an absence of data binding. Since I am using !, my components talk with one another using the expressions mechanism. Thank you. – oobarbazanoo Dec 26 '18 at 8:13
1

It would seem that your ParentAppWithListAttrController.js should be using v.JustAList and v.JustAnItem where v.JustAnItem is located in the position in v.JustAList where the Event occurred. The old value of v.JustAnItem is irrelevant. You just need to put the new value in the proper location in the list, then set JustAList. If you don't set it, the change is not communicated to all the components.

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.