function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Vikas Singh ThakurVikas Singh Thakur 

How to rerender the lightning component inside another component when the Locker service is enableed.

I have an lightning component which is inherit in another lightning component. So on button click , i just set the attribute value  and use this value in ui:inputNumber tag in the child cmp. Attribute value is successfuly changed but it did not rerender on the cmp When the Locker Service is enabled. it workes fine without locker service.

Ex. of my cmp:

Parent cmp :
<div>
        <aura:iteration items="1,2,3,4,5" var="item">
            <c:TestVSOptionalExtra />
          </aura:iteration>
    </div>

Child cmp:

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes" access="global" >
    <aura:attribute name="quantity" type="Integer" default="0"/>
    <div>
        <ui:inputNumber class="center-aligned-number" disabled="false" value="{!v.quantity}" size="2"/>
        <ui:button aura:id="clicked" press="{!c.clickEvent}"> click me</ui:button>
    </div>
</aura:component>

JS controller :
({
    clickEvent : function(component, event, helper) {
        var eventType = event.getSource().getLocalId();
        var counter = component.get("v.quantity");  
        if (eventType === 'clicked') {            
            counter++;
        }
        component.set("v.quantity", counter);
//here quantity value is changed and appears in the log but did not change on the cmp UI.
        console.log(component.get("v.quantity"));
    }
})

While it works fine if i do not put this inside any cmp even the Locker service is enabled.
Tanuj TyagiTanuj Tyagi
Hi Vikas ,
I replicated your scenario and ran it inside lightning app and it worked for me with locker serices enabled.

Here is my Code :-

Parent Comp Name : ParentTest

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes" access="global" >
    <div>
        <aura:iteration items="1,2,3,4,5" var="item">
            <c:ChildTest />
          </aura:iteration>
    </div>
</aura:component>

Child Comp Name : TestChild

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes" access="global"  >
    
    <aura:attribute name="quantity" type="Integer" default="0"/>
    <div>
        <ui:inputNumber class="center-aligned-number" disabled="false" value="{!v.quantity}" size="2"/>
        <ui:button aura:id="clicked" press="{!c.clickEvent}"> click me</ui:button>
    </div>

</aura:component>

JS Controller :
({
    clickEvent : function(component, event, helper) {
        var eventType = event.getSource().getLocalId();
        var counter = component.get("v.quantity");  
        if (eventType === 'clicked') {            
            counter++;
        }
        component.set("v.quantity", counter);
//here quantity value is changed and appears in the log but did not change on the cmp UI.
        console.log(component.get("v.quantity"));
    }
})


App :-
<aura:application >
    <c:ParentTest />
</aura:application>


Try to run this code and let me know.

Hope it helps.
Cheers!!

Tanuj