1

I'm trying to clone the array of records that is passed to the component and add some additional attributes to the cloned records however I always get the 'Invalid mutation: Cannot set "detailHeader" on "[object Object]". "[object Object]" is read-only.' error.

I have tried cloning it in the connectedCallback but still doesn't work. Any suggestions?

@api detailheaderfield;
@api detailbodyfield;
@track selectedRecords

@api
get records(){
    return this.selectedRecords;
}

set records(value){
    let records = [...value];
    records.forEach((record) => {
        record.detailHeader = record[this.detailheaderfield];
        record.detailField = record[this.detailbodyfield];
    });

    this.selectedRecords = records;
}
1
  • 4
    You need to deep clone value as it mutated when set from the parent. Also. the spread operator clones the array but not the elements inside that. Commented Jul 29, 2020 at 11:50

2 Answers 2

2

As per Rahul's comment:

You need to deep clone value as it mutated when set from the parent. Also. the spread operator clones the array but not the elements inside that.

I did a deep clone on the value by doing JSON.parse(JSON.stringify(value)); and I was able to modify the records.

0

Input parameters are read only. You must copy as Rahul said.

You must log in to answer this question.

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