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:
OnboardingPage.js
import getBacklog from '@salesforce/apex/OnboardingHandler.getOnboardingBacklog';
export default class OnboardingPage extends LightningElement {
@wire(getBacklog) onboardingList;
doSomething(onboardingId) {
console.log('clicked: ' + onboardingId);
}
}
OnboardingPage.html
<template>
<lightning-card title="Onboarding" icon-name="action:new_task">
<div class="slds-m-around_medium">
<template if:true={onboardingList.data}>
<table id="tblOnboardingList">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<template for:each={onboardingList.data} for:item="dt" for:index="indexvar">
<tr id="datarow">
<td>
<!-- need to call js function with the parameter
<a onClick={doSomething(dt.Id)}>
{!dt.Account.Name}
</a>
</td>
<td>{!dt.Email}</td>
<td>{!dt.Phone}</td>
</tr>
</template>
</tbody>
</table>
</template>
<template if:true={onboardingList.error}>
{onboardingList.error}
</template>
</div>
</lightning-card>
</template>
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.
HTML
JS Controller
Here is the live example