[SalesForce] How to pass parameter to javascript method from table in LWC

I have table that shows list of record, I want to make call to javascript function with each iterated value as a parameter.
Here is the detail of my js and html file:


import getBacklog from '@salesforce/apex/OnboardingHandler.getOnboardingBacklog';

export default class OnboardingPage extends LightningElement {
    @wire(getBacklog) onboardingList;

    doSomething(onboardingId) {
        console.log('clicked: ' + onboardingId);


    <lightning-card title="Onboarding" icon-name="action:new_task">
        <div class="slds-m-around_medium">
            <template if:true={onboardingList.data}>
                <table id="tblOnboardingList">
                        <template for:each={onboardingList.data} for:item="dt" for:index="indexvar">
                            <tr id="datarow">
                                    <!-- need to call js function with the parameter 
                                    <a onClick={doSomething(dt.Id)}>
            <template if:true={onboardingList.error}>

The error i got when I try to call js function with parameter:

Invalid expression {doSomething(dt.Id)} – LWC1060: Template expression doesn't allow CallExpression

Basically I want to call js function with parameter within iterated record. How can I achieve this in LWC?

Best Answer

You can pass data using data attributes of HTML elements. You can set multiple data attributes on each elements. For eg.


<a onclick={getIdVal} data-id={dt.id}>Test</a> 

JS Controller

    console.log('id => ' + event.target.dataset.id);

Here is the live example