change color after condition in vue.js

Question

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 ?

tony19 · Accepted Answer · 2022-07-15 01:47:20Z

6

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>

edited Jul 15, 2022 at 1:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 28, 2018 at 15:04

Olaf

1,1328 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sofiane Over a year ago

should i put this before this my <div> ?

Olaf Over a year ago

you can place the v-bind:class anywhere you want.

Sofiane Over a year ago

i did it but i have no result something is wrong can yo help me please

Olaf Over a year ago

Did you create a function in the component? Update your quesiton with the rest of your component.

Sofiane Over a year ago

any help please

|

Collectives™ on Stack Overflow

change color after condition in vue.js

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related