LWC html table apex call it imperatively data immutable

Question

I am working on a simple app to retrieve field permissions and then trying to update back. However, if I change the data using UI, I don't see the changed data in the log. I see this blog by @sfdcfox mentioned that wired data is immutable and we have to clone it. In my case, it is not wired data and I am calling apex method using a button, but still, I cloned the data and try to use it.

The data is reading properly, but no updates are manipulating the data.

HTML table:

<tbody>                
                                 <template if:true={permissionData}>  
                                        <template for:each={permissionData} for:item="perm"> 
                                            <tr key={perm.key}> 
                                                <td key={perm.key}>  
                                                    <lightning-input type="checkbox" ></lightning-input>                                                                          
                                                </td>                   
                                                <td key={perm.key}>  
                                                    <div class="slds-truncate" title="Name"> {perm.key}  </div>                      
                                                </td>                        
                                                <template for:each={perm.value} for:item="permActions">
                                                    <td key={permActions.Id}> 
                                                        {permActions.profilename}
                                                        <lightning-input type="checkbox" label="Read" checked={permActions.readvalue} onchange={statusChanged}></lightning-input>   
                                                        <lightning-input type="checkbox" label="Edit" checked={permActions.editvalue} onchange={statusChanged}></lightning-input> 
                                                    </td>
                                                </template>
                                            </tr>
                                          </template>
                                  </template>
                            </tbody>

JS:

 fetchPermissions({ sObjectName: 'Account', fieldList: JSON.stringify(this.selectedOptionsList)})
            .then(data => {
                this.permissionData =[];                
                let mutableData = Object.assign({},data);               

                for(let key in mutableData) {
                    // Preventing unexcepted data
                    if (mutableData.hasOwnProperty(key)) { // Filtering the data in the loop
                        this.permissionData.push({value:mutableData[key], key:key});
                    }
                }


                let recordsCount = this.permissionData.length;  
                this.totalrecords = recordsCount;  
                    if (recordsCount !== 0 && !isNaN(recordsCount)) {  
                    this.totalpages = Math.ceil(recordsCount / this.pagesize)
                    }
            })
            .catch(error => {
                this.error = error;
            }); 

Screenshot:

Error: If you see the screenshot, after loading the data I unchecked the Read and Write input checkbox, however in the console it is still showing both "true".

Note: The reason, I was not able to use data table is that the data is complex which I was not able not to fit into the data table. For example, having two checkboxes in the same cell.

handle update:

 handleUpdate(){
        window.console.log('Updated List: '+JSON.stringify(this.permissionData));
    }

Answer 1

LWC is not 2-way binding and so value or checked mentioned in lightning-input will not get automatically updated.

You need to update the intended value manually in onchange method handler.

<lightning-input type="checkbox" label="Read" checked={permActions.readvalue} onchange={statusChanged}>
  </lightning-input>

For this, you need below:

statusChanged(event) {
    this.permActions.readvalue = event.target.checked;
}

and then when you check permActions, it will be updated.

NOTE: The value or checked attribute you use in lightning-input can be used only for setting default value.

-----added------

You can have data- attributes inside iteration to update correct object. Example:

<lightning-input type="checkbox" label="Read" checked={permActions.readvalue} 
                   data-mid="some_reference"
                   onchange={statusChanged}>
</lightning-input>

and in JS:

statusChanged(event) {
    if (event.target.dataset.mid === 'some_reference') this.permActions.readvalue = event.target.checked;
}

You can pass record Id or any other identifiable property in data- attribute.

Answer 2

I've found the best way to handle creating a list dynamically is to have a separate component representing the row, enabling you to reference the row in the onchange handlers.