This event is fired when an attribute value changes. Handle this event using the aura:handler tag. A component can have multiple aura:handler tags to detect changes to different attribute values.
<aura:handler name=”change” value=”{!v.items}” action=”{!c.itemsChange}”/>
This example updates an attribute value, which fires the aura:valueChange event.
<aura:component>
<aura:attribute name=”myBool” type=”Boolean” default=”true”/>
<aura:handler name=”change” value=”{!v.myBool}” action=”{!c.handleValueChange}”/>
<lightning:button label=”change value” onclick=”{!c.changeValue}”/>
</aura:component>
The client-side controller actions trigger the value change and handle it.
({
changeValue : function (component, event, helper) {
component.set(“v.myBool”, false);
},
handleValueChange : function (component, event, helper) {
alert(“old value: ” + event.getParam(“oldValue”));
alert(“current value: ” + event.getParam(“value”));
}
})
The valueChange event gives you access to the previous value (oldValue) and the current value (value) in the handler action. In this example, oldValue returns true and value returns false.