[Vuejs]-How can i make condition to change color using v-bind:class

by

0👍

✅

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

0👍

Instead of v-bind:class="{ACTIVE:statusIsActiveFunction(item.status)}

You simply need v-bind:class="{ 'ACTIVE' : isActive }"

So if isActive is true, then it will add the ACTIVE class.

You can even make it even shorter with :class="{ 'ACTIVE' : isActive }" The shortcut for v-bind:class is :class.

Leave a comment