Hey there, I have a parent-child scenario, in which I also have a save and cancel button.

The idea is to be able to modify the child component, and when clicking on cancel, do a value reset, but this is not happening, every time the original attribute is updated, the 'backup' is also updated.

this is the parent, note the functions of: save and cancel.

<div class={companyClass}>
                <lightning-card >
                    <h3 slot="title" class="slds-text-heading_medium slds-p-top_none">
                        Select Company
                    </h3>
                    <lightning-button-icon icon-name="utility:close" variant="container" alternative-text="Cancel"
                        onclick={closeCompanyComponent} title="Cancel" slot="actions"></lightning-button-icon>
                    <lightning-button-icon icon-name="utility:check" variant="container" alternative-text="Save"
                        onclick={saveCompanyComponent} title="Save" slot="actions"></lightning-button-icon>
                    <c-company-form>

                    </c-company-form>
                </lightning-card>
            </div>

parent js

saveCompanyComponent(event) {
      try{
        this.template.querySelector("c-company-form").doBackup();
      }catch(e){
         console.log(e);
      }
  }

  closeCompanyComponent(event) {
    try{
      this.template.querySelector("c-company-form").resetValues();
    }catch(e){
       console.log(e);
    }
  }

child
 

//this method is important to get a 'backup'
    @api
    doBackup(){
        this.backupMapArrayToInclude = this.mapArrayToInclude;
        this.backFullMapArray = this.fullMapArray;
        this.backupFullListOfAccount = this._fullListOfAccount;
        this.disabledInclude = true;
        this.disabledRemove = true;
        this.listToRemove = new Map();

        console.log('saving values.....');
    }

and also in the child, just below
 

@api
    resetValues(){
        this.mapArrayToInclude = this.backupMapArrayToInclude;
        this.fullMapArray = this.backFullMapArray;
        this._fullListOfAccount = this.backupFullListOfAccount;
        this.disabledInclude = true;
        this.disabledRemove = true;
        this.listToRemove = new Map();
    }

I am adding values ​​to the original map (fullMapArray) , but it is also updating the value in (backFullMapArray) - without calling the function doBackup.
Both variables are declared like this:

//original
   _mapArrayToInclude = [];
    fullMapArray = new Map();
    _fullListOfAccount = new Map();
    listToRemove = new Map();


    //for backup
    backupMapArrayToInclude = [];
    backFullMapArray = new Map();
    backupFullListOfAccount = new Map();

The component is more complex, that's why I did it this way, but I would like to know how to avoid duplicating the values ​​and be able to perform a reset.

Thank you!!!

I'm trying to remove an attribute from an input field, specifically 'readonly' when I click on a button. I have tried this way and it is not working for me.
HTML

<lightning-input type="text" class="generalInfo" id="title" value="Title" readonly></lightning-input> <lightning-input type="text" class="generalInfo" value="Sub Title" readonly></lightning-input> <lightning-input type="text" class="generalInfo" value="Publication Date" readonly></lightning-input> <lightning-button-icon icon-name="utility:edit" alternative-text="Edit" title="Edit" onclick={editGeneralInfo}>

editGeneralInfo() in JS

this.template.querySelectorAll(".generalInfo").forEach(element => { if(element.hasAttribute('readonly')){ console.log('YES'); element.removeAttribute('readonly'); } });

Thank you!

I'm trying to remove an attribute from an input field, specifically 'readonly' when I click on a button. I have tried this way and it is not working for me.
HTML

<lightning-input type="text" class="generalInfo" id="title" value="Title" readonly></lightning-input> <lightning-input type="text" class="generalInfo" value="Sub Title" readonly></lightning-input> <lightning-input type="text" class="generalInfo" value="Publication Date" readonly></lightning-input> <lightning-button-icon icon-name="utility:edit" alternative-text="Edit" title="Edit" onclick={editGeneralInfo}>

editGeneralInfo() in JS

this.template.querySelectorAll(".generalInfo").forEach(element => { if(element.hasAttribute('readonly')){ console.log('YES'); element.removeAttribute('readonly'); } });

Thank you!