[Vuejs]-Change color on bootstrap using vue.js

by

0👍

✅

<vue-tabs class="row" direction="vertical" value="Description" >
     <div  v-for="(item, index) in siteObject.line_info" :key="index">
        <v-tab :title="siteObject.line_info[index].lineid">
            <div class="description text-left" :class="{ 'text-danger': item.status === 'ACTIVE' }">
                <small v-for="(field, key) in item" :key="key">
                    <strong>{{ key }}</strong> {{ field }}<br>
                </small>
                <pre>{{item.status}}</pre>
            </div>

        </v-tab>

    </div>

  </vue-tabs>

and style

<style scoped>
  .text-danger {
    color: red !important;
  }
</style>
👤Sofiane

2👍

Have you looked at Class & Style bindings?

Add :class="{ 'text-danger': status === 'Active' }" to the element you want to apply your red text to.

Then create your .text-danger in your css.

In this example we are essentially saying:

IF status is equal to Active EXACTLY, Add a class of text-danger

👤Kwesi

Leave a comment