When "button1" receives 2 pieces of data returned by "APEX", "table" will have 2 lines and contain 2 'sync' buttons.
Question: How do I add click events to these 2 rows of data?
In JS, I can use [i] or [this], but I am not quite sure about it in LWC.
HTML
<template>
<button class="slds-button slds-button_neutral slds-size_1-of-4 slds-text-heading_small" onclick={button1}>Display Data</button>
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="头像">头像</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="账号名称">账号名称</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="账户会员数">账户会员数</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="数据库内会员数">数据库内会员数</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="手动同步">手动同步</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="同步进度">备注</div>
</th>
</tr>
</thead>
<tbody for:each={datatableList} for:item="dtl" key={dtl.id}>
<tr class="slds-hint-parent">
<th scope="row">
<lightning-avatar variant="circle" src={dtl.qrcodeurl} initials="WeChat" fallback-icon-name="standard:person_account" alternative-text="WeChat" class="slds-m-right_small"></lightning-avatar>
</th>
<td >
<div class="slds-truncate" >{dtl.name}</div>
</td>
<td >
<div class="slds-truncate" >{dtl.total}</div>
</td>
<td >
<div class="slds-truncate" >{dtl.localTotal}</div>
</td>
<td>
<button class="slds-button" onclick={syncBtn} if:false={showload}> 同 步 </button>
<lightning-avatar variant="circle" src="https://www.opet.com.tr/assets/images/loading_3.gif" initials="loading" fallback-icon-name="standard:person_account" alternative-text="loading" class="slds-m-right_small" if:true={showload}></lightning-avatar>
</td>
<td >
<div class="slds-truncate" >本次同步时间,大约耗时:<strong>{dtl.time}</strong></div>
</td>
</tr>
</tbody>
</table>
</template>
JS
import { LightningElement, track} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import getWeChatList from '@salesforce/apex/cpcs_getWeChatFansServers.getWeChatList';
export default class SystemSetup extends LightningElement {
@track datatableList = [];
@track showload = false;
//get apex return value
button1() {
getWeChatList()
.then(result => {
var responseCode = JSON.parse(result).code;
var responseMsg = JSON.parse(result).msg;
var responseData = JSON.parse(result).data;
if(responseCode === 0){
this.datatableList = JSON.parse(result).data;
}else{
const event = new ShowToastEvent({
title: '获取公众号列表失败',
message: '获取公众号列表失败,请联系管理员,失败原因:' + responseMsg,
variant: 'error',
mode: 'dismissible'
});
this.dispatchEvent(event);
}
})
.catch(error => {
this.error = error;
});
}
syncBtn() {
console.log();
this.showload = true;
syncWeChatFans()
.then(result => {
var responseCode = JSON.parse(result).code;
var responseMsg = JSON.parse(result).msg;
if(responseCode === '0'){
const event1 = new ShowToastEvent({
title: '同步理成功',
message: '同步粉丝数据处理已完成',
variant: 'success',
mode: 'dismissible'
});
this.dispatchEvent(event1);
this.showload = false;
}else{
const event1 = new ShowToastEvent({
title: '同步失败',
message: '同步粉丝接口失败,失败原因:' + responseMsg,
variant: 'error',
mode: 'dismissible'
});
this.dispatchEvent(event1);
this.showload = false;
}
})
.catch(error => {
this.error = error;
});
}
}
Best Answer
Provide a dataset attribute to your sync button like
<button class="slds-button" onclick={syncBtn} if:false={showload} data-whichrow={dtl.id} >
then in your js
syncBtn
method access whichwhichrow
and see which row was clicked.Playground-link : https://developer.salesforce.com/docs/component-library/tools/playground/soo_ZHji3/1/edit