<aura:iteration items="{!v.itemList}" var="con" indexVar="index">    
    <div class="slds-p-top_small">        
        <aura:if isTrue="{!con.Contact.unformattedMobile}">
            <lightning:button variant="{!(and(v.phoneType == 'phone', v.indexVal == index)) ? 'brand' : 'neutral'}" onclick="{!c.SelectedNumber}" aura:id="phone" value= "{!index}" />
        <aura:if isTrue="{!con.Contact.unformattedHome}">
            <lightning:button variant="{!(and(v.phoneType == 'fax', v.indexVal == index)) ? 'brand' : 'neutral'}" onclick="{!c.SelectedNumber}" aura:id="fax" value= "{!index}"/>


SelectedNumber : function(component, event, helper) {
        var btnClicked = event.getSource();
        var btnClickedId = btnClicked.getLocalId();
        var index = event.getSource().get("v.value");

I have declared all the attributes and I am getting the values in the component. I am trying to change the button variant on click of the button. Since it is in Iteration I cannot use aura:id value because it's selecting all the fax's in the displayed rows when I select one fax button

output is looking like this, imagine phone and fax are buttons

0Phone   0Fax
1Phone   1Fax
2Phone   2Fax

now I am trying to match the auraId with the rowIndex and change the button variant using and condition, but it is not working.

variant="{!(and(v.phoneType == 'phone', v.indexVal == index)) ? 'brand' : 'neutral'}"

Is there any way I can make change the button variant on click which is in iteration? thanks!


indexVar can't be used as part of another expression - ie you can't compare it to anything.

Because of this, you should use something else as your unique identifier for the row... luckily, you have something - contactId (if you don't have it, you can probably get it easily)

So in your button syntax, you would define variant and value like this:

  variant="{!(and(v.phoneType == 'phone', v.selectedId == con.Id)) ? 'brand' : 'neutral'}"
  .... other attributes

And in the handler you'd save your value to a new attribute: selectedId -

var contactId = event.getSource().get("v.value");
  • Thanks @Caspar Harmer, but I had tried with the contactId as well, I am able to print the right values on button click, but the variant type is not changing
    – learnsfdc
    Apr 10 at 3:54
  • 1
    ahhh, nevermind, I was making a silly mistake, instead of Id, I was using id in the condition... Thanks for taking time and helping me figure the solution!!
    – learnsfdc
    Apr 10 at 3:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.