0

I have an array and I present the records using a template with for:each. How can I update the array values based on user input so that when I call the apex to insert, the updated values get passed?

I am thinking I can use the onchange on each field but not sure how to update the value of the specific record. In other words, if the array has 2 records, how do I update this specific record? Below is the HTML I'm using to display the records. Thanks!!

<template for:each={clonedGroupStructures} for:item="cgs">
                      <div key={cgs.Id}>
                        <div class="slds-box  slds-p-left_medium slds-p-right_medium" >       
                            <div class="slds-grid">
                                <div class="slds-col mykeys">  
                                       <lightning:layoutItem  class="myKeys" > 
                                        <lightning-input name="Section" label="Section" value={cgs.Section_Code__c} required="True"></lightning-input>
                                       </lightning:layoutItem>
                                </div>
                                <div class="slds-col mykeys">  
                                       <lightning:layoutItem > 
                                        <lightning-input name="Package" label="Package" value={cgs.Package_Code__c} onchange={handlePackageChange} required="True"></lightning-input>
                                       </lightning:layoutItem>
                                </div>
                                

                        <div class="slds-grid">
                                <div class="slds-col">  
                                        <lightning:layoutItem  class="customMain" > 
                                            <lightning-textarea name="Comment" label="Comment" value={cgs.Comment__c} style="width:95%"></lightning-textarea>
                                        </lightning:layoutItem>
                                </div>
                        </div>  
                    </div>
                </div>
            </template>

1 Answer 1

3

You need to have an index value in your array - clonedGroupStructures. If you can iterate the array and add an index [ 0,1,2....] to it then you could be able to capture it from the input event. Once receiving the index from the event , just use clonedGroupStructures[index].xyz to update the properties of the array.

<template for:each={clonedGroupStructures} for:item="row" for:index="index">
<lightning-button
 data-rowindex={row.index} 
 onclick={handleOnClickEvent}
</lightning-button>
</template>

In JS:

handleOnClickEvent(event){
 let rowindex = event.target.dataset.rowindex; // 0,1,2,3...
 clonedGroupStructures[rowindex].property1 = xyz; // from event
}
4
  • Thank you for responding! How would I pass that index value using onchange?
    – Frank
    Feb 2, 2021 at 14:56
  • In the answer I have specified a way. Check this syntax data-rowindex={row.index} which gets the index.
    – SfdcBat
    Feb 2, 2021 at 15:32
  • Thank you!! Last question, is this the best practice for updating the values? I will need to create an onchange for each field and handle this way? thanks again!
    – Frank
    Feb 2, 2021 at 15:41
  • 1
    Yes, you can learn about it in MDN doc - developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…
    – SfdcBat
    Feb 2, 2021 at 16:02

You must log in to answer this question.

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