function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Abhishek Sharma 527Abhishek Sharma 527 

variable is read only error - lwc

Hello, I have LWC to show contact records and modal to edit the records, while editing record it shows error as fields are read-only, can anyone help.
// html

    <template>
        <lightning-card title="Contact Records">
       
            <lightning-datatable data={wireContact.data} columns={columns} key-field="id" hide-checkbox-column="true"  onrowaction={handleRowAction}  ></lightning-datatable>
           
            <template if:true={modalContainer}>
                <section  class="slds-modal slds-fade-in-open">
                    <div class="slds-modal__container">
                        <header class="slds-modal__header">
                            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModalAction}>
                            <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
                            </button>
                           
                            <h2 class="slds-text-heading_medium slds-hyphenate">Contact Record Detail</h2>
                        </header>
                        <div class="slds-modal__content slds-p-around_medium">
                            <table class="slds-table slds-table_bordered slds-table_col-bordered slds-table_cell-buffer">
                            <thead>
                                <tr>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email Name</th>
                                    <th>Phone Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>

                                    <td><lightning-input
                                        type="text"
                                        label="First name"
                                        value={contactRow.FirstName}
                                        onchange={handleChange}>
                                    </lightning-input></td>
                                    <td><lightning-input
                                        type="text"
                                        label="Last name"
                                        value={contactRow.LastName}
                                        onchange={handleChange}>
                                    </lightning-input></td>
                                    <td><lightning-input
                                        type="Email"
                                        label="Email"
                                        value={contactRow.Email}
                                        onchange={handleChange}>
                                    </lightning-input></td>
                                    <td><lightning-input
                                        type="tel"
                                        label="Phone"
                                        value={contactRow.Phone}
                                        onchange={handleChange}>
                                    </lightning-input> </td>
                                </tr>
                            </tbody>  
                            </table>
                        </div>
                        <footer class="slds-modal__footer">
                       
                            <lightning-button class="slds-p-horizontal_medium" id="btn1" variant="brand" label="Close" title="Close"  onclick={closeModalAction}></lightning-button>
                            <lightning-button class="slds-p-horizontal_medium" variant="brand" label="Save" title="Save" type="submit" onclick={handleSave}></lightning-button>
                       
                    </footer>
                    </div>
                </section>
                <div class="slds-backdrop slds-backdrop_open"></div>
            </template>
        </lightning-card>
    </template>

----------------------------------------------

// JS code
import { LightningElement, track, wire } from 'lwc';
import getContacts from '@salesforce/apex/LWCExampleController.getContacts';
import saveRecords from '@salesforce/apex/LWCExampleController.saveRecords';
const columns=[
    {label: 'View',type: 'button-icon', initialWidth: 75, typeAttributes: { iconName: 'action:preview', title: 'Preview',
     variant: 'border-filled', alternativeText: 'View'}
      },
    { label: 'First Name',fieldName: 'FirstName', editable: true},
    { label: 'Last Name',   fieldName: 'LastName', editable: true},
    { label: 'Email', fieldName: 'Email'},
    { label: 'Phone',   fieldName: 'Phone'}
];
export default class LwcDataTableRowAction extends LightningElement {
  @track columns = columns;
  @track contactRow={};
  @track rowOffset = 0;  
  @track modalContainer = false;
  @track saveDraftValues = [];
  @track contacts;
   @wire(getContacts) wireContact;
 
   handleRowAction(event){
      const dataRow = event.detail.row;
      window.console.log('dataRow@@ ' + dataRow);
      this.contactRow=dataRow;
      window.console.log('contactRow## ' + dataRow);
      this.modalContainer=true;
   }
 
   handleChange(event){
      if(event.target.label=='First name'){
          this.contactRow.FirstName = event.target.value;
      }
      if(event.target.label=='Last name'){
          this.contactRow.LastName = event.target.value;
      }            
      if(event.target.label=='Email'){
          this.contactRow.Email = event.target.value;
      }
      if(event.target.label=='Phone'){
         this.contactRow.Phone = event.target.value;
     }
   }
   handleSave(){
      saveRecords({ contactToUpdate: this.contactRow })
           .then((result) => {
               console.log(result);
           })
           .catch((error) => {
               console.log(error);
           });
  }
   closeModalAction(){
    this.modalContainer=false;
   }
}

-------------------------------------------------------
// apex class

public inherited sharing class LWCExampleController {
    @AuraEnabled(Cacheable = true)
    public static List<Contact> getContacts() {
        return [SELECT Id, Name, FirstName, LastName, Phone, Email
                FROM Contact
                WHERE Email != null
                AND Phone != null
                ORDER BY CreatedDate DESC NULLS LAST limit 10];
    }
    @AuraEnabled
   public static void saveRecords(Contact contactsToUpdate){
   
    update contactsToUpdate;
   }
}
Sai PraveenSai Praveen (Salesforce Developers) 
Hi,

Can you check the below example with similar approach.

https://www.w3web.net/record-save-edit-field-inline-in-lwc/


Let me know if you face any issues.

If this solution helps, Please mark it as best answer.

Thanks,
Abhishek Sharma 527Abhishek Sharma 527
As mentioned in question, I need to edit in modal and this code already does that partially, while saving there's issue if you can suggest on that. Thanks