изменить цвет после условия в vue.js

Question

когда я использую этот скрипт:

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

У меня есть этот результат:

nsn 0102799121
upk 173.0-1 / 1
статус ACTIVE
lex_id 78EFFEFVS
hdf_port
product_id PPS515818292
технология VDSL
access_type BBCSNaked

как я могу показать, что статус активен красным и неактивен серым?

Answer 1

Возможно, вы ищете условные привязки классов.

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

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

В вашем случае я бы порекомендовал сделать функцию, которая получает предмет. И возвращает true / false, если строка === ACTIVE или нет. Что-то вроде:

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