CODEWITHSUNDEEP
cssvue.js
Pok3r Princ3
Pok3r Princ3

Reputation: 147

Dynamically adding classes in Vue based on value

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!

Upvotes: 1

Views: 2469

Answers (2)

The Reason
The Reason

Reputation: 7973

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

Upvotes: 1

user10317280
user10317280

Reputation:

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

Upvotes: 1

Related Questions