Lightning Components Developer Guide
jNewer Version Available
aura:valueChange
Indicates that an attribute value has
changed.
This event is automatically fired when an attribute value changes. The aura:valueChange event is handled by a client-side
controller. A component can have multiple <aura:handler
name="change"> tags to detect changes to different attributes.
1<aura:handler name="change" value="{!v.items}" action="{!c.itemsChange}"/>This example updates a Boolean value, which automatically fires the aura:valueChange event.
1<aura:component>
2 <aura:attribute name="myBool" type="Boolean" default="true"/>
3
4 <!-- Handles the aura:valueChange event -->
5 <aura:handler name="change" value="{!v.myBool}" action="{!c.handleValueChange}"/>
6 <ui:button label="change value" press="{!c.changeValue}"/>
7</aura:component>These client-side controller actions trigger the value change and handle it.
1({
2 changeValue : function (component, event, helper) {
3 component.set("v.myBool", false);
4 },
5
6 handleValueChange : function (component, event, helper) {
7 // handle value change
8 console.log("old value: " + event.getParam("oldValue"));
9 console.log("current value: " + event.getParam("value"));
10 }
11})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.