LWC | Get modified values of a list in javascript controller

Question

I am having a lightning web component which iterates over a list and displays values in a list

HTML:

<template>
<template for:each={myList} for:item="myRecord">
    <div class="slds-truncate" title={rowSip.rowSIP.E2E_Volume_Target_FFE__c}>
        <lightning-input type="text"  name="input2" value={myRecord.Name} onchange={updateValues}></lightning-input>
    </div>
</template>

Javascript:

updateValues(event) {
    console.log(this.myList);
}

Problem:

In the 'updateValues' , I am consoling the list. But it has the old value.

Expected:

The list should give the modified value.

What could be the problem ? Or how to get the updated list values in Javascript ?

Answer 1

There is no way binding, thus you have to update the element in your list yourself. You can do that defining an attribute in your lightning-input and do array.find in the orignal list and then update that selected element.

<template>
    <template for:each={myList} for:item="myRecord">


        <lightning-input type="text" key={myRecord.Id} data-id={myRecord.Id} name="input2"  value={myRecord.Name} onchange={updateValues}></lightning-input>

    </template>
</template>

JS:

@track myList = [{Name: "MEOW" ,Id : 'I1'} , {Name: "Bark" ,Id : 'I2'}];



    updateValues(event){
        let foundelement = this.myList.find(ele => ele.Id == event.target.dataset.id);
        foundelement.Name = event.target.value;
        this.myList = [...this.myList];

        console.table(JSON.stringify(this.myList));



    }