Get value (or other attribute) of lightning:button on click

  • Does anyone have an idea of how to get the "value" attribute (or name or anything else) of the lightning:button that triggers an action ?

    I tried to grab the button element from the event.currentTarget but it does not have any information.

    You can see in this example that I'm trying to figure out which filter corresponds to the button:

    <aura:iteration items="{!v.selectedFilters}" var="filter" indexVar="filterIndex">
       <li class="slds-pill slds-m-right--xxx-small" >
         <a href="javascript:void(0);" class="slds-pill__label" title="Full pill label verbiage mirrored here">{!filter.displayValue}</a>
         <lightning:buttonIcon iconName="utility:close" alternativeText="close" variant="bare" onclick="{!c.resetFilter}" value="{!filterIndex}"/>
      </li>
    </aura:iteration>
    

    controller:

    resetFilter : function(component,event,helper) {
        console.log(event.currentTarget);
        console.log(event.target);
    }
    
  • The only way I could think of is to create my own component that I iterate on and register an onclick event.

    Child component :

    <aura:component >
      <aura:attribute name="label" type="string"/>
      <aura:attribute name="value" type="object"/>
      <aura:registerEvent name="onclick" type="c:evtDOMEvent"/>
    
      <a href="javascript:void(0);" class="slds-pill__label" title="Full pill label verbiage mirrored here">{!v.label}</a>
      <lightning:buttonIcon iconName="utility:close" alternativeText="close" variant="bare" onclick="{!c.triggerOnClickEvent}"/>
    </aura:component>
    

    Child controller :

    ({
       triggerOnClickEvent : function(component, event, helper) {
         component.getEvent("onclick").fire();
       }
    })
    

    Parent Component :

     <aura:iteration items="{!v.selectedFilters}" var="filter" indexVar="filterIndex">       
        <li class="slds-pill slds-m-right--xxx-small" >
           <c:uiPill label="{!filter.displayValue}" onclick="{!c.resetFilter}" value="{!filterIndex}"/>
       </li>
     </aura:iteration>
    

    Parent Controller

    resetFilter : function(component,event,helper) {
        console.log(event.getSource().get("v.value"));
    },
    

    Now event.getSource().get("v.value") return the proper value

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM