4

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>

JS

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

2 Answers 2

4

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
2
  • Thanks for the help
    – Mohit K
    Commented Dec 12, 2019 at 9:00
  • Please accept the answer if its works for you. so other people know, when they will face similar issue. otherwise let me know what does not work for you. Commented Dec 12, 2019 at 9:42
0

Lightning Web Component data binding expressions can only reference a single property, or getter function, as described in the documentation.

You can resolve this by ensuring that you put the rfiles.Id and rfiles.bankName into a single property as an array, for example, within your LWC JavaScript:

@track idAndName;

openEditLimitModal(event) {
    this.idAndName = [event.target.value.Id, event.target.value.bankName];

    ...
}

And in the template you simply reference the tracked property:

<button value={idAndName} ...

If the button is a standard HTML button and you want to use the ID and name as a string, simply change the initialization of the idAndName property thus, for example:

this.idAndName = event.target.value.Id + ' ' + event.target.value.bankName;
4
  • This gives you value as a string not object. Commented Dec 12, 2019 at 8:16
  • This gives an array. Look at idAndName initialization in the openEditLimitModal. This is not a string. How you initialize the property depends on what the end result should be. I assumed an array was required given the syntax applied by the OP in the question.
    – Phil W
    Commented Dec 12, 2019 at 8:26
  • Please check this I tried to access it like event.target.value[0] which should return me the first value in an array instead of first character. Commented Dec 12, 2019 at 8:32
  • 2
    That isn't what the OP asked to do.
    – Phil W
    Commented Dec 12, 2019 at 8:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .