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);
}