Issue
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!
Solution
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
Answered By - The Reason
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.