[SalesForce] How to pass multiple parameters in value attribute in LWC

My requirement is to pass multiple parameters in value attribute from HTML to JS in LWC component.

CODE –

In value attribute in want pass multiple parameters to JS.
I tried writing like this : value={rfiles.Id, rfiles.bankName}

HTML

<template for:each={RelatedFiles.data} for:item="rfiles">
                   <tr key={rfiles.Id}>
                     <td class="relatedFiles">{rfiles.bankName}</td>
                        <td style="text-align: left;">
                           <button 
                             class="slds-button slds-button_outline-brand" 
                             value={rfiles.Id, rfiles.bankName} onclick= 
                             {openEditLimitModal} >
                              Edit Limits
                           </button>
                       </td>
                 </tr>
</template>

 openEditLimitModal(event){
        window.console.log("Value -- " + event.target.value.bankName);
        window.console.table("RecordId -- " + event.target.value.Id); 
    }

Best Answer

You can use data-<attribute>

<button 
    class="slds-button slds-button_outline-brand" 
    onclick = {openEditLimitModal}
    data-id = {rfiles.Id}
    data-bank-name = {rfiles.bankName}>
    Edit Limits
</button>

This is how you can access these data properties.

event.target.dataset.id
event.target.dataset.bankName

Related Solutions

[SalesForce] How we can pass reRender attribute value using JavaScript

I'm not sure you'll be able to do this as the parameter is processed by the server when the page is displayed to the user — even if you can it's likely to be hacky and at risk of breaking later down the road. Depending on your scenario it might be easier to leverage Visualforce remoting to move data back and forth and then to generate new output HTML accordingly.

If that's not an option, would be be disastrous to just skip the re-render and render the whole page again? Not perfect but a much simpler solution!

[SalesForce] How to use input field value in LWC

The reason you are not able to get percentage is because the wired data is immutable. So, you can get the clone as below after which it should work:

if (data) {
    this.lineItemData = [...data];
}

I assume data here is the list of records and so using [...]

You do not need key on all tds .
Even if you use label-hidden variant, you need to put label for lightning-input .
You do not need value on the column percentageValue as you should collect and modify corresponding row in lineItemData .
You should use some identifier like data-key to know which row is being modified. Then in the change handler you can assign to exactly that row data field .

HTML:

<td>
    <lightning-input variant="label-hidden" data-key={lineItem.key} label="percentageValue" type="number" onchange={PercentageChange}>
    </lightning-input>
</td>

JS:

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

Here is the playground link that I created for you.

Best Answer

Related Solutions

[SalesForce] How we can pass reRender attribute value using JavaScript

[SalesForce] How to use input field value in LWC

Related Topic