change color on bootstrap using vue.js

Question

wen i run this script with vue.js and bootstrap ( vertical tab )

<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">
        <small v-for="(field, key) in item" :key="key">
          <strong>{{ key }}</strong> {{ field }}<br>
        </small>
      </div>
    </v-tab> 
  </div>     
</vue-tabs>

I have this result

nsn 0102753206

upk 1018.0-1/2

status ACTIVE

lex_id 79VOLGUTD

What can i do that when status is Active then is all text is red?

Answer 1

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

Answer 2

<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>