0

I have lightning buttonIcon in table for every record.When I click the buttonIcon on each row it has to change icon name from utility:add to utility:check.Even though if I select each row and try to change the icon in onclick event all rows button icons are getting changed.

<aura:iteration items={!v.mydata} var ="obj" indexvar="index">
    <tr id={!index}>
        <td>    
            <lightning:buttonIcon iconName="{!v.icon}" title="Default" 
                          alternativeText="Default" onclick="{!c.add}" />
        </td>
        <td class="" data-label="Name">{!obj.Name}</td>
        <td class="" data-label="Type">{!obj.Type}</td>
        <td class="" data-label="Age">{!obj.Age}</td>
    </tr>
</aura:iteration>


({
  add: function(component, event, helper) {
    component.set("v.icon", component.get("v.icon")=="utility:add"?
                                     "utility:check":"utility:add");
  }
})

1 Answer 1

1
<aura:iteration items={!v.mydata} var ="obj" indexvar="index">
<tr id={!index}>
<td>    <lightning:buttonIcon iconName="{!obj.icon}" title="Default" 
           alternativeText="Default"
                      onclick="{!c.add}" /></td>
<td class="" data-label="Name">{!obj.Name}</td>
<td class="" data-label="Type">{!obj.Type}</td>
<td class="" data-label="Age">{!obj.Age}</td>
</tr>
</aura:iteration>

You have stored icon in single attribute (v.icon) which changes for each and every iteration of your object.

So you can store icon name in your v.mydata variable

init : function(component){
    var data = component.get('v.data');
    data.map(function(item){
         item.icon = 'utility:add';
         return item;
    });
}

Now onclick

add: function(component, event, helper) {
   var index = event.target.id;
   var data = component.get('v.mydata');
   var item = data[index];
   item.icon = "utility:add" ? "utility:check" : "utility:add";

   component.set("v.mydata",data); 

}
2
  • after adding the obj.icon onclick event is not firing. Feb 6, 2018 at 20:09
  • I do not think there will be any issue of onclick event Feb 7, 2018 at 4:00

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.