Child components can't modify attribute data passed in from a parent component

Question

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?

Answer 1

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.

Answer 2

This would be where you'd want to define and use bubbling from the child component to the parent component. That means you'd want to use the <aura:registerEvent> tag in your child component's markup and then create an event listener in the parent component for the event that gets fired from the child.

In your case, I believe your code would look something like this:

First, let's define the event:

<aura:event type="COMPONENT">
    <aura:atrribute name="pk" type="string" />
    <aura:atrribute name="columnData" type="string[]" />
</aura:event> 

To retrieve the "pk" event data in your child component's handler, call event.getParam("pk") in the handler's client-side component.

In the child component, you'd add the following code:

<aura:registerEvent name=:"colclick" type="c:ColClick" />

To raise the event in JS from the child's handler, use:

({
    PnDomColClick : function(component,event,helper) {
       var compEvent = component.getEvent("colclick");
       //
       // set some data for the event 
       // (this is what I think you're probably missing most)
       // (it's also known as event shape)
       //
       compEvent.setParams({setParams({"pk" : 1, colData: ['A'] });
       compEvent.fire();
       }
})

Events bubble up to tags in the containment hierarchy. Define an event listener in a parent tag as below:

<aura:component>
    <aura:handler
    name="colclick"
    event="c:ColClick"
    action="{!c.handleBubbling}" />

</aura:component>

In your event handler you can access event parameters as follows:

handleBubbling: function(component,event,helper) {
    var params = event.getParams();
    alert("You selected: " + params.pk);
}

Calling event.stopPropagation() will prevent the event from cascading further up the hierarchy.

Calling event.getSource() returns the component that raised the event. (Note: not available for application events)

If you need to find source of an application event, use evt.setParams() to set the source component in the event data before firing it.