0

I have a template that iterates through an array called amountArray and creates input fields for the amounts. The input fields have the same name called fieldAmount. When I enter value, I know which input I am in with the help of the index. The problem I have is the first field works but when I get to the second field it will not push it in the array under Amount2

See results: [{"Name":"fff","Description":"ttt","Amount":"777","**Amount2":"",**"Schedule":"a0h8A000005UjVPQA0"}]

Here is the template:

<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-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={amountArray} for:item="field2" for:index="index2">
            <td key={field2.index2} scope="col">    
                <lightning-input  key={index2} data-index={index2} access-key={index2} 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>

Here is my changeHandler:

changeHandler(event){
    
    if (event.target.name==='fieldName') {
        this.contentArray[event.target.accessKey].Schedule = 'a0h8A000005UjVPQA0';
        this.contentArray[event.target.accessKey].Name = event.target.value;
    } else if (event.target.name==='fieldDescription') {
        this.contentArray[event.target.accessKey].Description = event.target.value;
    } else if (event.target.dataset.index ==='0') {
       console.log('Index 0');
       // I see index 0 when I enter a value in that specific field
       this.contentArray[event.target.accessKey].Amount = event.target.value;
                
    } else if (event.target.dataset.index ==='1') {
        // I see index 1 when I enter a value in that specific field
        console.log('Index 1'); 
        this.contentArray[event.target.accessKey].Amount2 = event.target.value;
    }
    console.log(JSON.stringify(this.contentArray));
}

Not too sure if the issue is due to accessKey being the same key and it doesn't allow to do so? How can I make this work? Thanks! Eric

0

event.target refers to the HTML element the event was fired from. When the event is fired from an element where access-key is set to index, it will be the index of the contentArray. Conversely, when the event is fired from an element where access-key is set to index2, it will be the index of the amountArray (in the inner for:each).

Presumably, you want to update same element/object in whatever iteration of contentArray that you are updating in the other fields. So you want to set the access-key value to index instead of index2.

1
  • Make sense, it does work! ;) – Eric Mar 17 at 21:33

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.