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

}
| improve this answer | |
  • after adding the obj.icon onclick event is not firing. – Vidhyasagaran Muralidharan Feb 6 '18 at 20:09
  • I do not think there will be any issue of onclick event – Manjot Singh Feb 7 '18 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.