0

I'm creating LWC where I need to assign value in '@track selectedValue'. I'm using below code

export default class CustomTrackStage extends LightningElement {

@track selectedValue;
@api recordId;
@track showSpinner = false;

@wire(getObjectInfo, { objectApiName: LEAD_OBJECT })
objectInfo;

@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
record;

@wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: PICKLIST_FIELD })
picklistFieldValues;




get picklistValues() {
    let itemsList = [];
    
    console.log(JSON.stringify(this.record));
    if (this.record.data) {
        if (!this.selectedValue && this.record.data.fields.Status.value) {
            this.selectedValue = this.record.data.fields.Status.value + '';
        }
        if (this.picklistFieldValues && this.picklistFieldValues.data && this.picklistFieldValues.data.values) {
            console.log('got picklist field data');
            let selectedUpTo = 2;
            for (let item in this.picklistFieldValues.data.values) {

                if (Object.prototype.hasOwnProperty.call(this.picklistFieldValues.data.values, item)) {
                    let classList;
                    if (this.picklistFieldValues.data.values[item].value === this.selectedValue) {
                        classList = 'slds-path__item slds-is-current slds-is-active';
                        selectedUpTo++;
                    } else {
                        classList = 'slds-path__item slds-is-incomplete';
                    }

                    console.log(classList);

                    itemsList.push({
                        pItem: this.picklistFieldValues.data.values[item],
                        classList: classList
                    })
                }
            }

            if (selectedUpTo > 0) {
                for (let item = 0; item < selectedUpTo; item++) {
                    itemsList[item].classList = 'slds-path__item slds-is-complete';
                }
            }
            console.log('im here = ' + this.selectedValue);
            return itemsList;
        }
    }
    return null;
} 

}

Here in method get picklistValues() when I'm trying to assign value in '@track selectedValue' its throwing error pushErrorAcrossBoundary$LWS.

f (!this.selectedValue && this.record.data.fields.Status.value) {
            this.selectedValue = this.record.data.fields.Status.value + '';
        }

When I remove @track annotation from selectedValue it works fine Can someone tell me what's causing this issue? Am I wrong somewhere ?

Layout:

<div class="slds-grid slds-path__scroller-container">
                <div class="slds-path__scroller" role="application">
                    <div class="slds-path__scroller_inner">
                        <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
                            <p> test {picklistValues}</p>
                            <template if:true={picklistValues}>
                                <template for:each={picklistValues} for:item="item">
                                    <li data-value={item.pItem.value} onclick={handleSelect} key={item} class={item.classList} role="presentation">
                                         <a data-value={item.pItem.value} onclick={handleSelect} aria-selected="true" class="slds-path__link" href="javascript:void(0);" id={item.pItem.value} role="option"
                                            tabindex="0">
                                            <span class="slds-path__stage">
                                                <lightning-icon icon-name="utility:check" alternative-text="Warning!" variant="inverse" size="x-small"></lightning-icon>
                                                <span class="slds-assistive-text">Current Stage:</span>
                                            </span>
                                            <span class="slds-path__title">{item.pItem.label}</span>
                                        </a>
                                    </li>
                                    
                                </template>
                            </template>
                        </ul> 
                    </div>
                </div>
            </div>

1 Answer 1

0

You don't need to use the @track for the primitive data type. You can read more about it here.

The error "pushErrorAcrossBoundary$LWS" usually occurs when you try to modify a tracked property outside the scope of a reactive context in Lightning Web Components (LWC). In your case, the issue seems to be related to assigning a value to selectedValue inside the get picklistValues() method.

To resolve this issue, you should avoid modifying tracked properties within getter methods. Instead, you can handle the assignment in a different context, such as a lifecycle hook or an event handler.

@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
        wiredRecord({ error, data }) {
            if (data) {
                this.selectedValue = this.record.data.fields.Status.value + '';
                this.error = undefined;
            } else if (error) {
                this.error = error;
                this.record = undefined;
            }
        }
5

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .