<aura:handler name="change" value="{!v.items}" action="{!c.itemsChange}"/>
This example updates a Boolean value, which automatically fires the aura:valueChange event.
<aura:component> <aura:attribute name="myBool" type="Boolean" default="true"/> <!-- Handles the aura:valueChange event --> <aura:handler name="change" value="{!v.myBool}" action="{!c.handleValueChange}"/> <ui:button label="change value" press="{!c.changeValue}"/> </aura:component>
These 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) { // handle value change console.log("old value: " + event.getParam("oldValue")); console.log("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.