Cannot update list in JS after assigning value to field in that list

Question

I want to update the list 'this.quoteItems' with the new onchanged value entered in the Quantity Input field in the UI. The list shown by 'console.table' is the old list. My list is not getting updated.

Please help me to solve this issue.

HTML:

<template for:each={quoteItems} for:item="quoteLineItem"  if:true={quoteItems} for:index="indexVar">
    <tr class="slds-hint-parent" key={quoteLineItem.qliId}>
        <td data-label="Delete" scope="row" class="deleteIcon">
            <lightning-icon style="width: 25px" icon name="utility:delete" alternative-text="Delete" title="Delete" size="xx-small" ></lightning-icon>
        </td>
        <td data-label="Product Name" scope="row" class="otherTd">
            <div class="slds-cell-wrap">{quoteLineItem.prodName}</div>
        </td>
        <td data-label="Quantity" scope="row" class="otherTd">
            <lightning-input style="width: 60px" field-name="Quantity" value={quoteLineItem.prodQty} key={indexVar} data-id={quoteLineItem.qliId} name="proQty" type="number" variant="label-hidden" onchange={handleUpdateChange}></lightning-input>
        </td>
    </tr>
</template>

JS:

import { LightningElement, track, wire, api } from 'lwc';
import getQLIRelatedToQuote from '@salesforce/apex/LwcApexController.getQLIRelatedToQuote';
//import saveItems from '@salesforce/apex/LwcApexController.saveItems';

export default class QuoteRelatedquoteItems extends LightningElement {

@api recordId;
@api newQuoteItems;
@api quoteItems=[];

@wire(getQLIRelatedToQuote, {quoteId: '$recordId'}) 
WireQuoteLineItemRecords({error, data}){
    if(data){
        this.quoteItems = data;
        this.updatedLstQLIs = data;
        this.error = undefined;
    }
    else{
        this.error = error;
        this.quoteItems = undefined;
    }
}

handleUpdateChange(event){

let foundelement = this.quoteItems.find(ele => ele.qliId == event.target.dataset.id);
        console.log('foundelement :',foundelement);

        let tempVar = JSON.parse(JSON.stringify(foundelement));

        tempVar.prodQty = event.target.value;

        this.quoteItems = [...this.quoteItems];
        console.table(JSON.stringify(this.quoteItems));
}

Answer 1

You need to modify the original variable. As you've probably noticed, however, the data is read only. tempVar is disconnected from the original data because you used JSON.parse(JSON.stringify(foundelement)). This creates a new, duplicate object that won't affect the original.

To fix this, I'd start with copying the data directly from the wire handler:

@wire(getQLIRelatedToQuote, {quoteId: '$recordId'}) 
WireQuoteLineItemRecords({error, data}) {
    if(data) {
        // map and {...item} to copy array and shallow copy every element 
        this.quoteItems = data.map((item)=>({...item}));
        this.updatedLstQLIs = data;
        this.error = undefined;
    } else {
        this.error = error;
        this.quoteItems = undefined;
    }
}

Which would then allow you to directly update the value:

handleUpdateChange(event){
    let foundelement = this.quoteItems.find((ele) => ele.qliId === event.target.dataset.id);
    foundelement.prodQty = event.target.value;
}