LWC - How to clear my input text fields when saving?

Question

When saving a record, my input fields should is replaced with empty value (clear the text field) and I am having issue with the one within the iteration. I have 2 inputs that are not part of the iteration and a couple of dynamic one that are in the iteration that seems to be not working as intended.

Html:

<template for:each={contentArray} for:item="field" for:index="index">
                        <tr key={keyIndex}>
                            <td scope="col">
                                {index}
                            </td>
                            <td scope="col">
                                <lightning-input value={field.Name} data-index={index} access-key={index} type='text' name="fieldName" onchange={changeHandler}>
                                </lightning-input>
                                {index}
                            </td>
                            <td scope="col">
                                <lightning-input value={field.Description__c} data-index={index} access-key={index} type='text' name="fieldDescription" onchange={changeHandler}>
                                </lightning-input>
                                {index}
                            </td>
                            
                            <template for:each={field.amountC} for:item="field2" for:index="index2">
                                <td key={keyIndex2} scope="col">    
                                    <lightning-input value={field2.Amount__c} data-index={index2} access-key={index} type='text' name="fieldAmount" onchange={changeHandler}>
                                    </lightning-input>
                                    {index}-{index2}
                                </td>
                            </template>
                            <td scope="col">
                                <lightning-icon icon-name="action:delete"  access-key={index} size="small" title="large size" onclick={removeRow}>
                                </lightning-icon>
                            </td>
                        </tr>
                    </template>

js

changeHandler(event){ console.log(JSON.stringify(this.contentArray));

    if(event.target.name=='fieldName'){
        this.contentArray[event.target.accessKey].Schedule__c = 'a0h8A000005Tuz8QAC';
        this.contentArray[event.target.accessKey].Name = event.target.value;
    }
    else if(event.target.name==='fieldDescription'){
        this.contentArray[event.target.accessKey].Description__c = event.target.value;
    }
    else if(event.target.name==='fieldAmount'){
        this.contentArray[event.target.accessKey].amountC[event.target.getAttribute("data-index")].Amount__c = event.target.value;
    console.log(event.target.getAttribute("data-index"));
    }
}

saveMultipleRecords() {
 saveRecords({ recList : this.contentArray })
            .then(result => {
                this.message = result;
                this.error = undefined;  
                console.log(this.contentArray);  
                debugger;
                this.contentArray.forEach(function(item){                   
                    item.Name='';
                    item.Description__c=''; 
                    
                    for(var i=0;i < item.amountC.length;i++){
                        console.log(contentArray);
                        item.amountC[i].Amount__c = '0';
                    }
                    /*item.amountC.forEach(function(item2){
                        item2.Amount__c='0'; 
                    });*/
                       
                });
                console.log(contentArray);
                if(this.message !== undefined) {
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Records Created!',
                            variant: 'success',
                        }),
                    );
                }
            })
            .catch(error => {
                this.message = undefined;
                this.error = error;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating records',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
                console.log("error", JSON.stringify(this.error));
            });
    }

What am I doing wrong?

Thanks

Answer 1

You should shallow copy the variable, which forces a render cycle:

// I left this here so you can figure out where the next line goes.
console.log(contentArray);
this.contentArray = [...this.contentArray];