I have a template that iterates through an array called amountArraycalled amountArray and creates input fields for the amounts. The input fields have the same name called fieldAmountfieldAmount. When I enter value, I know in 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
See results:
[{"Name":"fff","Description":"ttt","Amount":"777","Amount2":"","Schedule":"a0h8A000005UjVPQA0"}][{"Name":"fff","Description":"ttt","Amount":"777","**Amount2":"",**"Schedule":"a0h8A000005UjVPQA0"}]
<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>
<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>
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));
}
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 accessKeyaccessKey being the same key and it doesn't allow to do so? How can I make this work?
Thanks!
Eric
