0

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));
}

2
  • you are not modifying this.quoteItems you are modifying tempVar . why this.quoteItems will change? May 8 at 15:44
  • 1
    @gauravsharma - Yes I got it, and also the solution given by sfdcfox helped to solve my problem May 8 at 17:48

1 Answer 1

2

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;
}
3
  • You answer has helped me...Thanks for that @sfdcfox. But can you explain me about this line. "this.quoteItems = data.map((item)=>({...item}));" What does it exactly do? May 8 at 18:04
  • @PrashantKumbhar Its creates a shallow copy. Basically the line is iterating each value in data and returning back a copy using spread operator. May 9 at 13:08
  • Ok got it... thanks @AnshulAgrawal May 10 at 5:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.