[SalesForce] lightning button icon issue

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");
  }
})

Best Answer

<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); 

}
Related Topic