I want to set the css class based on the record data for the specific card and not the same class for all the cards so I'm not able to make use of getter here, as there's no way I can pass record data with event.

Below is a small snippet of HTML:

<lightning-card title={objData.sName}>
                            <p class="slds-p-horizontal_small">
                                <lightning-badge label=""  data-id={objData.bIsOneActive}></lightning-badge>
                                <lightning-badge label=""  data-id={objData.bIsTwoActive} ></lightning-badge>
                                <lightning-badge label=""  data-id={objData.bIsThreeActive}></lightning-badge>

The above lightning-card is inside of a grid's column, so I'll have 3 badges for each of the lightning card and depending on the value of bIsActive, I want to set the class for the respective lightning-badge (set class as active if it's true).

I tried below too , but it throws an error:

            let targetId = true;
            let badgeClass = this.template.querySelectorAll(`[data-id="${targetId}"]`);
            console.log('badgeClass : ' ,badgeClass);
            for(let i=0;i<this.badgeClass.length;i++){
                badgeClass[i].className = "active";

the above throws an error on length of badgeClass,

So I also tried :

let targetId = true;
                let badgeClass = this.template.querySelectorAll(`[data-id="${targetId}"]`);
                console.log('badgeClass : ' ,badgeClass);
                for(let i=0;i<this.dataList.length;i++){
                    badgeClass[i].className = "active";

I used the original dataList in above to get length, as the each of the record will have one value from bIsOneActive, bIsTwoActive, isThreeActive as true and therefore size of records returned by this.template.querySelectorAll([data-id="${targetId}"]) should be equal to original data list's length.

I have been scratching my head trying to find a way to implement this. Can someone please help me figure this out?


Updated code as per sfdcfox's advice:

if(result.length > 0){
                this.dataList = result;
                this.dataList.map((obj) => ({
                    sBadgeClass1: obj.bIsOneActive ? 'active' : '',
                    sBadgeClass2: obj.bIsTwoActive ? 'active' : '',
                    sBadgeClass3: obj.bIsThreeActive ? 'active' : '',
                console.log('this.dataList : ' ,this.dataList);   

However, the console still shows the original data and the 3 new properties aren't added to the records.

1 Answer 1


this refers to a class variable. badgeClass is a local variable, so you do not use this.

for(let i = 0; badgeClass.length > i; i++) {

Note you can also use a forEach loop:

[...badgeClass].forEach(badge => badge.className = 'active');

I would recommend setting the value for the class name directly into your dataList elements, so you can directly refer to it in the template:

this.dataList = this.dataList.map((datum) => ({
badgeClass1: datum.bIsOneActive ? 'active' : '',
badgeClass2: datum.bIsTwoActive ? 'active' : '',
badgeClass3: datum.bIsThreeActive ? 'active' : '',
  • @sddcfox.. thanks for your inputs. I tried using the approach wherein we create 3 additional properties for each record(badgeClass1, etc). However, when I console this.dataList after that, the properties aren't added to the actual records. Any reason why it's not getting attached to the actual records?
    – sfdcnoob
    Jul 15, 2020 at 18:54
  • @sfdcnoob Would need to see the latest version of your code. It should work just fine as written above. Can you edit your question, please?
    – sfdcfox
    Jul 15, 2020 at 18:58
  • please look at the updated question. At the bottom , I've added the updated section.
    – sfdcnoob
    Jul 15, 2020 at 19:05
  • @sfdcnoob the result of calling Array.prototype.map is a new list, you need to reassign the value: this.dataList = this.dataList.map(....
    – sfdcfox
    Jul 15, 2020 at 19:10
  • a big miss from my end.. seems I messed up everything as I was not able to solve this. thank you so much
    – sfdcnoob
    Jul 15, 2020 at 19:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .