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?
Thank you.
<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`saura:attribute
is the issue here. The data in parent component is not updated, while I would expect it to be updated.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.