CODEWITHSUNDEEP
twitter-bootstrapvue.js
Sofiane
Sofiane

Reputation: 331

change color after condition in vue.js

wen i use this script :

<div class="card-content">
        <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>
      </div>

i have this result:

nsn 0102799121
upk 173.0-1/1
status ACTIVE
lex_id 78EFFEFVS
hdf_port
product_id PPS515818292
technology VDSL
access_type BBCSNaked

how can i show the status wen is active red and he inactive grey ?

Upvotes: 2

Views: 10026

Answers (1)

Olaf
Olaf

Reputation: 1122

You're probably looking for conditional class bindings.

https://v2.vuejs.org/v2/guide/class-and-style.html

<div class="static"
 v-bind:class="{ active: item.STATUS, 'text-danger': !item.Active}">
</div>

In your case I'd recommend making a function that receives the item. And returns true / false if the string === ACTIVE or not. Something like:

<div class="static"
 v-bind:class="{ active: statusIsActiveFunction(item.STATUS), 'text-danger': !statusIsActiveFunction(item.STATUS)}">
</div>

Upvotes: 6

Related Questions