[SalesForce] Child components can’t modify attribute data passed in from a parent component

I have a table grid Lightning component where a child component is trying to modify single columns. The columns are passed in as shown below.

<aura:component>
    <aura:attribute name="table" type="Object" default="{ columns: [{...}, {...}],...}" />

    <aura:iteration items="{!v.table.columns}" var="column">
        <c:child singleColumn="{!column}" />
    </aura:iteration>
</aura:component>

But changes are never reflected in the parent. It seems not to see this changes of a fragment of its table attribute.

I thought Lightning might prevent child data modifications to enforce the use of events. But this is is not the case. When I pass in the full table it works.

<aura:component>
    <aura:attribute name="table" type="Object" default="{ columns: [{...}, {...}],...}" />

    <aura:iteration items="{!v.table.columns}" var="column">
        <c:child table="{!v.table}" singleColumn="{!column}" />
    </aura:iteration>
</aura:component>

But I don't want that. That would be bad modularization and encapsulation. I want sub components only have access to the data they work on.

Any chance to get that solved without using events?

Best Answer

I also experienced this strange behavior while changing data within aura:iteration.

The problem here is, that changes are affecting the data, but this change does not trigger the default change event. I guess it's a bug!

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

This won't work, for no valid reason. You could solve this, by throwing your own event, letting the parent know, that you changed the data. You don't need to pass the data itself, since the data is already updated, the parent just didn't get informed about it.

I just opened an issue at github to get this fixed asap.

Related Topic