function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Som_11Som_11 

I am not able to see lightining button properly in lwc

In LWC for each loop for each row I want to add button and on button click I want to call apex method passing id. Can anyone give me examples to pass if for button click with specific for each item id. And I am not able to button also properly.

My Template code
          <div> <h2><b> These are the Incentives you can avail</b></h2>
            <template if:true={incentives.data}>
              
                <template for:each={incentives.data} for:item="inctv">
                  <div key={inctv.Id} class="slds-box"> 
                    <p key={inctv.Id}>{inctv.Name}  for Target : </p> <p key={inctv.Id}>{inctv.icxdmsv1__Target__r.Name}</p>
                    <lightning-button key={inctv.Id}>{inctv.Name} variant="brand" label="Avail" onclick={handleGetIncentive} class="slds-button slds-button_brand slds-button_stretch"></lightning-button>
                  </div>
                  </template>
                
            </template>
            </div>

Lightining button not showing up properly
AnudeepAnudeep (Salesforce Developers) 
Hi Somesh, 

I am posting here a sample code here for your reference where lightning button is used in iteration


testLWC.html: 
<template>

    <div class="slds-box">
        <lightning-card  title="Test Component" icon-name="standard:file">
            <lightning-button label="Test" onclick={testFunction} slot="actions"></lightning-button>


            <table class="slds-table slds-table_cell-buffer slds-table_header-hidden slds-table_bordered">
                <tbody>
                    <template for:each={sections} for:item="section" for:index="indexParent">
                        <tr key={section.index}>
                            <td>
                                {section.Name}
                            </td>
                            <td>
                                col 2
                            </td>
                            <td>
                                <lightning-button label="Upload" onclick={testFunction} ></lightning-button>
                            </td>
                            <td>
                                col 4
                            </td>
                        </tr>
                        <template for:each={section.rowList} for:item="row" for:index="indexChild">
                            <tr key={row.index}>
                                <td>
                                    {row.Name}
                                </td>
                                <td>
                                    child col 2
                                </td>
                                <td>
                                    child col 4
                                </td>
                                <td>
                                    child col 4
                                </td>
                            </tr>
                        </template>
                    </template>
                </tbody>
            </table>
            
        </lightning-card>
    </div>
</template>


testLWC.js: 
import { LightningElement, track } from 'lwc';

export default class TestLWC extends LightningElement {

    @track sections =   [
                        {Name:"Section 1", rowList:[]} //{Name:"Row 1"},{Name:"Row 2"},{Name:"Row 3"}
                        ,{Name:"Section 1", rowList:[]}
                        ]; //{Name:"Row 1"},{Name:"Row 2"},{Name:"Row 3"}]}

    connectedCallback(){
        // default logic
    }

    testFunction(){
        this.sections[0].rowList.push({Name:'Test'});
    }

}

Let me know if this helps, if it does, please mark this answer as best so that others facing the same issue will find this information useful. Thank you
CharuDuttCharuDutt
Hii Somesh 
I'Ve Made Some Changes In Your Code
Just Copy Paste This Line 
<lightning-button key={inctv.Id} variant="brand" label={inctv.Name} onclick={handleGetIncentive} class="slds-button slds-button_brand slds-button_stretch"></lightning-button>

Please Mark it as Best Answer If it helps
Thank you!
Som_11Som_11
Hi Anudeep, I want to pass an Id i.e, Key of a tag as input to function where I will call apex with passing Id, how can we do that?
CharuDuttCharuDutt
Hii Somesh
Try The Folloewng Code 


<lightning-button access-key={inctv.id} variant="brand" label={inctv.Name} onclick={handleGetIncentive} class="slds-button slds-button_brand slds-button_stretch"></lightning-button>


Js
handleGetIncentive(event){
let id = event.target.accessKey;
console.log(id);
}
Please Mark it as Best Answer If it helps
Thank you!