изменить цвет при загрузке с помощью vue.js

Question

когда я запускаю этот скрипт с vue.js и начальной загрузкой (вертикальная вкладка)

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

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

nsn 0102753206

upk 1018.0-1 / 2

статус ACTIVE

lex_id 79VOLGUTD

Что я могу сделать, когда статус активен, тогда весь текст красный?

Answer 1

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

</ V-вкладка> </ Vue-вкладка>

и стиль

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

Answer 2

Вы смотрели на привязки класса и стиля?

Добавьте :class="{ 'text-danger': status === 'Active' }" к элементу, к которому вы хотите применить свой красный текст.

Затем создайте свой .text-danger в своем CSS.

---

В этом примере мы, по сути, говорим:

ЕСЛИ status равен Active ТОЧНО, Добавить класс text-danger