Dynamically set css class based on record data lwc

Question

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>
    </p>
</lightning-card>

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

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

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?

Answer 1

How about setting the class directly on the record:

{
    bIsOneActive: true,
    bOneClass: 'active',
    bIsTwoActive: true,
    bTwoClass: 'active',
    bIsThreeActive: true,
    bThreeClass: 'active',
}

So in your HTML you can do:

<lightning-card title={objData.sName}>
    <p class="slds-p-horizontal_small">
        <lightning-badge label="" class={objData.bOneClass}></lightning-badge>
        <lightning-badge label="" class={objData.bTwoClass}></lightning-badge>
        <lightning-badge label="" class={objData.bThreeActive}></lightning-badge>
    </p>
</lightning-card>

Another valid approach could be:

<lightning-card title={objData.sName}>
    <p class="slds-p-horizontal_small">
        <lightning-badge label="" if:true={objData.bIsOneActive} class="active"></lightning-badge>
        <lightning-badge label="" if:false={objData.bIsOneActive}></lightning-badge>
        <lightning-badge label="" if:true={objData.bIsTwoActive} class="active"></lightning-badge>
        <lightning-badge label="" if:false={objData.bIsTwoActive}></lightning-badge>
        <lightning-badge label="" if:true={objData.bIsThreeActive} class="active"></lightning-badge>
        <lightning-badge label="" if:false={objData.bIsThreeActive}></lightning-badge>
    </p>
</lightning-card>