Skip to main content
explained how to convert html attribute name in js
Source Link
RubenDG
  • 9.6k
  • 2
  • 15
  • 24

You could leverage data-* attribute: define an HTML attribute whose name must start with data- and can contain only letters, numbers, dashes, periods, colons, and underscores, i.e. data-id={item.id}. 
In Javascript event.currentTarget.dataset will hold every property defined in HTML, soin order to get the name of the property just remove the data- prefix and remove the dashes keeping in mind that you have to capitalize the next letter every time you remove a dash. I.E. The HTML attribute data-very-long-name="something" will become dataset.veryLongName.
So you'll find the id in event.currentTarget.dataset.id.

<template for:each={items} for:item="item">
  <lightning-button-menu label="Actions" data-id={item.id} onselect={handleActionsMenuSelect}>
    <lightning-menu-item label="Edit" value="edit"></lightning-menu-item>
    <lightning-menu-item label="Delete" value="delete"></lightning-menu-item>
  </lightning-button-menu>
</template>
handleActionsMenuSelect(event) {
    const recordId = event.currentTarget.dataset.id;
    console.log('recordId:', recordId);
}

You could leverage data-* attribute: define an HTML attribute whose name must start with data- and can contain only letters, numbers, dashes, periods, colons, and underscores, i.e. data-id={item.id}. In Javascript event.currentTarget.dataset will hold every property defined in HTML, so you'll find the id in event.currentTarget.dataset.id.

<template for:each={items} for:item="item">
  <lightning-button-menu label="Actions" data-id={item.id} onselect={handleActionsMenuSelect}>
    <lightning-menu-item label="Edit" value="edit"></lightning-menu-item>
    <lightning-menu-item label="Delete" value="delete"></lightning-menu-item>
  </lightning-button-menu>
</template>
handleActionsMenuSelect(event) {
    const recordId = event.currentTarget.dataset.id;
    console.log('recordId:', recordId);
}

You could leverage data-* attribute: define an HTML attribute whose name must start with data- and can contain only letters, numbers, dashes, periods, colons, and underscores, i.e. data-id={item.id}. 
In Javascript event.currentTarget.dataset will hold every property defined in HTML, in order to get the name of the property just remove the data- prefix and remove the dashes keeping in mind that you have to capitalize the next letter every time you remove a dash. I.E. The HTML attribute data-very-long-name="something" will become dataset.veryLongName.
So you'll find the id in event.currentTarget.dataset.id.

<template for:each={items} for:item="item">
  <lightning-button-menu label="Actions" data-id={item.id} onselect={handleActionsMenuSelect}>
    <lightning-menu-item label="Edit" value="edit"></lightning-menu-item>
    <lightning-menu-item label="Delete" value="delete"></lightning-menu-item>
  </lightning-button-menu>
</template>
handleActionsMenuSelect(event) {
    const recordId = event.currentTarget.dataset.id;
    console.log('recordId:', recordId);
}
Source Link
RubenDG
  • 9.6k
  • 2
  • 15
  • 24

You could leverage data-* attribute: define an HTML attribute whose name must start with data- and can contain only letters, numbers, dashes, periods, colons, and underscores, i.e. data-id={item.id}. In Javascript event.currentTarget.dataset will hold every property defined in HTML, so you'll find the id in event.currentTarget.dataset.id.

<template for:each={items} for:item="item">
  <lightning-button-menu label="Actions" data-id={item.id} onselect={handleActionsMenuSelect}>
    <lightning-menu-item label="Edit" value="edit"></lightning-menu-item>
    <lightning-menu-item label="Delete" value="delete"></lightning-menu-item>
  </lightning-button-menu>
</template>
handleActionsMenuSelect(event) {
    const recordId = event.currentTarget.dataset.id;
    console.log('recordId:', recordId);
}