1

I recently started looking into Lightning Web Components. Initially, I assumed that track decorator also acts like a change handler, But looks like I was wrong about it.

Is there any functionality in Lightning web components which is equivalent to

<aura:handler name="change" value="{!v.attriute}" action="{!c.handleChange}"/>

5

No, there is no such equivalent. The intent of LWC is to prevent the various bugs of two-way binding that occurs in Aura. Instead, specify an event handler and respond to those changes:

<c-my-component somedata={value} onchange={updateData}></c-my-component>

While there's some missing bits still (which I am assured is coming in the upcoming releases), you'll need to adjust your way of thinking to using events to notify the parent object of changes.

Data destined to be set by a parent component must use @api instead of @track. For your internal data, use @track to get updates to those values inside your class.

  • Been racking my head up against the wall with trying to avoid cloning a property thats passed into a component through an @ api variable and storing the clone into a @ track property. I didn't even think of firing off an event to the parent component and handling the change there – TemporaryFix Aug 20 at 21:22
1

Well, there exists an standard equivalent defined in the docs:

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.migrate_events

The point is substitute the variable definition, for example:

@api myVar;

Into getter and setter methods:

@api
get myVar(){
    return this._myVar;
}
set myVar(value){
    this._myVar=value;
    //Whatever logic o method to execute
}

I discovered that way trying to track an @api decorated variable to execute a function when the value is changed, but it can be extrapolated to other scenarios.

Hope it helps!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.