CODEWITHSUNDEEP
javascriptcsshtml-tablevue.jsvuejs2
bernd feinman
bernd feinman

Reputation: 346

Change textcolor of v-for generated table

I am using vue.js to display a bunch of json. It's a pile of numbers that is displayed in a table. That works well, but if the number is negative, the textcolor of its cell should be read.

<table>
    // ...
    <tbody>
        <tr>
            <td v-for="i in numbers" class="text-danger"> {{ i }} </td>
        </tr>
    </tbody>
</table>

As you can see, "class="text-danger" sets the textcolor to red in ALL cases. I want it to only apply if the number (i) is negative, so attach a condition to that.

I am totally stumped how to do this with vue.

Upvotes: 1

Views: 1028

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

Apply the class dynamically:

<td v-for="i in items" :class="{ 'text-danger': i < 0 }">{{ i }}</td>

Upvotes: 4

Related Questions