Dynamically adding classes in Vue based on value

Question

I'm facing an issue with adding dynamic styling to an element based on it's contents.

<td class="text-xs-left">{{ props.item.limitCardStatus }}</td>

The values of the limitCardStatus key are stored in several objects, and are as follows: "Active, Inactive, Sample".

What i want to achieve is to color "Active" green, "Inactive" red, and "Sample" yellow.

What i've have so far is: I generated the coresponding CSS classes & styles, and i tried using v-for with :class, but i can't seem to figure it out.

Here's the full table:

<v-data-table :headers="headers" :items="limitCards" hide-actions>
 <template v-slot:items="props">
  <td class="tableNumber text-xs-left">{{ props.item.number }}</td>
  <td class="text-xs-left">{{ props.item.limitCardNumber }}</td>
  <td class="text-xs-left">{{ props.item.productCode }}</td>
  <td class="text-xs-left">{{ props.item.plannedAmount }}</td>
  <td class="text-xs-left">{{ props.item.productName }}</td>
  <td
     class="text-xs-left"
     :class="{
     'green--text': limitCardStatus === 'Active',
     'yellow--text': limitCardStatus === 'Inactive',
     'yellow--text': limitCardStatus === 'Sample',
     }"
     >{{ props.item.limitCardStatus }}</td>
  </template>
 </v-data-table>

Can someone point me in the right direction? Thanks in advance!

tony19 · Accepted Answer · 2022-07-16 03:16:31Z

1

You can do it easily with the dynamic classes like so

<div
  class="text-xs-left"
  :class="{
    'green-color--text': limitCardStatus === 'Active',
    'yellow-color--text': limitCardStatus === 'Inactive',
    'yellow-color--text': limitCardStatus === 'Sample',
  }"
>{{ props.item.limitCardStatus }}</div>

More information is here

edited Jul 16, 2022 at 3:16

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 29, 2019 at 19:55

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pok3r Princ3 Over a year ago

Thank you sir, that's wonderful! I will accept your answer in 5 minutes, because it wont let me at the moment.

Pok3r Princ3 Over a year ago

Hmm, i've tried your apporach, but i'm getting this error:

Property or method "limitCardStatus" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

At the moment, the limitCardStatus data is stored in hardcoded array of objects, and i've tried reffering it by the array itself, and with this., but nothing worked. Any ideas?

The Reason Over a year ago

@Pok3rPrinc3 all you need is to replace my/your variable limitCardStatus to the one where your status is. Mb it has to by something like props.item.limitCardStatus

Pok3r Princ3 Over a year ago

Yeah, i've tried that at some point aswell :) The problem was: 'yellow-color--text' is actually yellow--text. Still your answer was the right one!

score 1 · Accepted Answer · 2021-04-17 08:53:22Z

Cleaner approach is to use ES6 computed property names

Assuming you're passing in prop named limitCardStatus to the component,

  <td
     class="text-xs-left"
     :class="{ [limitCardStatus]: 1 }"
     >{{ props.item.limitCardStatus }}</td>

1 is just there because there must be a truthy value on the right side for vue to apply the class name, you could do {{ [limitCardStatus]: limitCardStatus }} if you're not always passing in limitCardStatus prop to the component.

After, you can just replace CSS selectors for .green-text etc... with .Active .Inactive and .Sample

Collectives™ on Stack Overflow

Dynamically adding classes in Vue based on value

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related