Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MyDev TrainingMyDev Training 

LWC Collections @Track variables are read only

Basically this.caseWithComments is my track variable and it holds the list of case and using <template displaying data.
am trying to change the collection with in the JS file on button click and this.caseWithComments is read only so trying to change with new declaration and able to change the value and binding value back to the list but DOM is not rendering. 
showCaseComments(event) {
        let caseWithCommentsNew = this.caseWithComments;
        //console.log('Final==='+JSON.stringify(this.caseWithComments));
        for(var i=0;i < this.caseWithComments.length; i++ ){
            console.log('first variable==='+JSON.stringify(this.caseWithComments[i]));
            let ccNew = JSON.parse(JSON.stringify(this.caseWithComments[i]));
            ccNew.showCComments = true;
            //console.log('after show comment'+ccNew.showCComments ); 
            caseWithCommentsNew.push(ccNew);
            //this.caseWithComments[i] = ccNew;
            
        }
        
        //console.log('final===='+JSON.stringify(caseWithCommentsNew));
        this.caseWithComments = casewithCommentsNew;
        console.log('length===='+this.caseWithComments.length);
        //this.caseWithComments.splice(1,1);
        console.log('Final==='+JSON.stringify(this.caseWithComments));
    }

<template if:true={caseWithComments}>
                <template for:each={caseWithComments} for:item="cs" for:index="indexVar">
                    <tr key={cs.showCComments} class="slds-hint-parent">
                        <td><lightning-button variant="base" icon-name="utility:edit"  title="Primary action" onclick={showCaseComments} > </lightning-button></td>
                        <td > {cs.caseRecord.CaseNumber}</td>
                        <td>{cs.caseRecord.Owner.Name}</td>
                        <td>{cs.caseRecord.Status}</td>
                        <td>{cs.caseRecord.CreatedDate}</td>
                        <td>{cs.caseRecord.ClosedDate}</td>
                        <td>{cs.caseRecord.Origin}</td>
                        <td>{cs.caseRecord.Reason}</td>
                        <td>{cs.caseRecord.SourceId}</td>
                        <td>{cs.caseRecord.Description}</td>
                        <td> <template if:true={cs.ccCount}><lightning-button variant="brand" label="Show" title="Primary action" onclick={showCaseComments} class="slds-m-left_x-small"> </lightning-button> </template></td>
                    </tr>
</template>
</template>

 
Best Answer chosen by MyDev Training
Venu9999Venu9999
Take new vaiable like let caseWithCommentsNew1 =[] and push it to that array and then assign back to track property
this.caseWithComments = caseWithCommentsNew1;

All Answers

Venu9999Venu9999
Take new vaiable like let caseWithCommentsNew1 =[] and push it to that array and then assign back to track property
this.caseWithComments = caseWithCommentsNew1;
This was selected as the best answer
MyDev TrainingMyDev Training
showCaseComments(event) {
        let caseWithCommentsNew1 = [];
        let caseWithCommentsNew = this.caseWithComments;
        //console.log('Final==='+JSON.stringify(this.caseWithComments));
        for(var i=0;i < this.caseWithComments.length; i++ ){
            console.log('first variable==='+JSON.stringify(this.caseWithComments[i]));
            let ccNew = JSON.parse(JSON.stringify(this.caseWithComments[i]));
            ccNew.showCComments = true;
            //console.log('after show comment'+ccNew.showCComments ); 
            caseWithCommentsNew1.push(ccNew);
            //this.caseWithComments[i] = ccNew;
            
        }
        
        //console.log('final===='+JSON.stringify(caseWithCommentsNew));
        this.caseWithComments = caseWithCommentsNew1;

perfectly worked.
MyDev TrainingMyDev Training
let caseWithCommentsNew = [];
tried with this but it dint work and having another new one let caseWithCommentsNew1= []; working am not sure.