0

I am trying add a value to a property in js in lwc

On click of apply button I need to fetch the data from all the input field iterated below as per the size of lineItemData array but when I hit apply button I get the below error

Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'percentage' throws

Button

<lightning-button label="Apply" variant="brand" onclick={applyPercentage}></lightning-button>

Below is the HTML:

<template if:true={lineItemData}>
              <template for:each={lineItemData} for:item="lineItem">
                <tr key={lineItem.lineItemId}>
                  <td>
                    <lightning-input type="checkbox" variant="label-hidden">
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden" value={lineItem.category} disabled>
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden" value={lineItem.clientServiceName} class="fieldWidth"
                      readonly>
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden" type="number" data-key={lineItem.lineItemId}
                      label="percentageValue" onchange={percentageChange} class="fieldSize" placeholder="Percente"
                      step="0.001">
                    </lightning-input>
                  </td>
                </tr>
              </template>
            </template>

Below is the JS:

@wire(getIlineItemData, { productConfigId: '$productConfigId' })
LineItemData({ data }) {
    if (data) {
        this.lineItemData = [...data]; // doing online reserch I cam acrros [...data] should be the solution but still the error is same.
    }
}

percentageChange(event) {
    this.lineItemData
        .find(item => item.lineItemId === event.currentTarget.dataset.key)
        .percentage = event.target.value;
}

applyPercentage() {
        console.log(JSON.stringify(this.lineItemData));
    }

Apex:

@AuraEnabled(cacheable=true)
public static List<LineItemWrapper> getIlineItemData(Id productConfigId) {

    Apttus_Config2__LineItem__c[] uniqueLineItemList = new Apttus_Config2__LineItem__c[0];
    string[] uniqueStringList = new string[0];

    for(Apttus_Config2__LineItem__c lineItem : [SELECT Id,Apttus_Config2__ProductId__r.name, Apttus_Config2__AttributeValueId__r.APTS_Storage_Category__c
                                                FROM Apttus_Config2__LineItem__c WHERE (Apttus_Config2__ProductId__r.Family='Test'  OR Apttus_Config2__ProductId__r.Family='Storage')
                                                and Apttus_Config2__ConfigurationId__c =:productConfigId]) {
        if(!uniqueStringList.contains(lineItem.Apttus_Config2__ProductId__r.name)) {
            uniqueStringList.add(lineItem.Apttus_Config2__ProductId__r.name);
            uniqueLineItemList.add(lineItem);
        }
    }

    LineItemWrapper[] lineItemWrapperList = new LineItemWrapper[0];

    for(Apttus_Config2__LineItem__c apls : uniqueLineItemList) {

        LineItemWrapper lineItemWrapperObj   = new LineItemWrapper();
        lineItemWrapperObj.lineItemId        = apls.Id;
        lineItemWrapperObj.category          = apls.Apttus_Config2__AttributeValueId__r.APTS_Storage_Category__c;
        lineItemWrapperObj.clientServiceName = apls.Apttus_Config2__ProductId__r.name;
        lineItemWrapperObj.percentage        = 0.0;
        lineItemWrapperList.add(lineItemWrapperObj);

    }
    return lineItemWrapperList;
}

Console log:

"category":"Frozen","clientServiceName":"1045-Collagen IV","lineItemId":"a4e6E000000Bob9QAC","percentage":0},

Percentage property remain 0 even if I enter a value on the input filed label="percentageValue" but it should update in the log and I also get the above mentioned error, please suggest

  • Is there a reason you're not using a datatable? It has built in support for row level actions. – gNerb Nov 1 at 16:45
  • Thank you for your response but I cannot use input and output fields together in data table and as per my knowledge data table would be read only or support inline edit but my scenario is different, please correct if I am wrong – gs650x Nov 1 at 16:49
  • No its not undefined to me – gs650x Nov 1 at 17:06
  • Here is the playground where everything is working as expected developer.salesforce.com/docs/component-library/tools/… – gs650x Nov 1 at 17:21
  • 1
    Try below this.lineItemData = [...data] to this.lineItemData = JSON.parse(JSON.stringify(data)); – Avijit Chakraborty Nov 1 at 17:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.