0

Trying to pass a array value from parent component to child component using setter method in child LWC but empty value is being passed to child setter method. I am Using parent LWC as a quick action. any idea on why there is an issue passing array?

Note: Instead of array, if I pass a string value, there is no issue.

Parent HTML

    <c-child record-id={caseId}
    loaded={loaded}
    scope-values={scopeValues}>

Parent LWC.js

scopeValues = [];

 @api invoke()
    {        
        this.refreshInitialScopeDetails();             
    }
 refreshInitialScopeDetails() {
        this.scopeValues.push(this.orgId);  //getting orgId using lighting UI API

    }

Child LWC.js

_initialScopeValues;

@api
  get scopeValues() {
    return this._initialScopeValues;
  }

  set scopeValues(value) {
      console.log('scope value '+value);
    if (value && value.length > 0) {
      this._initialScopeValues = value.join(",");
    }
  }
2
  • Sudhir, please use the tools in the editor to format your code. I corrected it but your recent edit wiped out my changes. – David Reed May 28 at 14:20
  • Have you tried adding @track to scope scopeValues in parent? Otherwise the changes would not be observed. Also when is the invoke method called? After the wire returns? – manjit5190 May 28 at 14:26
2

An inner mutation like calling push() on an array doesn't trigger the framework to rerender or fire setters. The framework is observing changes to the scopeValues property in the parent, but not to changes within that object.

One way to handle this is to make sure you do an assignment to the component-level property, so that you notify the framework of the change automatically:

refreshInitialScopeDetails() { 
    this.scopeValues = [this.orgId, ...this.scopeValues];
    //getting orgId using lighting UI API
}

(This assumes you don't mind requiring ES9 support in your browser; otherwise you can use a construction with Array.concat(), or some other approach).

1
  • Thank you so much for your help David. Issue got resolved after making the changes you suggested. will use tools in editor for code format :) – Sudhir Balijepalli May 28 at 17:52
3

There is still one use case for @track. When a field contains an object or an array, there's a limit to the depth of changes that are tracked. To tell the framework to observe changes to the properties of an object or to the elements of an array, decorate the field with @track.

Without using @track, the framework observes changes that assign a new value to a field. If the new value is not === to the previous value, the component rerenders.

You need to use scopeValues = []; in your parent LWC with @track

@track scopeValues = [];

Read more about @track reactive property in LWC here

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.