Change vuetify v-chip color dynamically

user_319343 0
Viewed 5895

I am new to vuejs and vuetify.

I was following youtube course on vuetify and he set the v-chip color in the following manner.

<v-flex xs2 sm4 md2>
            <div class="right">
              <v-chip
                small
                :class="`${project.status} white--text my-2 caption`"
              >{{ project.status }}</v-chip>
            </div>
          </v-flex>

and style is;

.v-chip.complete {
  background: #3cd1c2;
}
.v-chip.ongoing {
  background: #ffaa2c;
}
.v-chip.overdue {
  background: #f83e70;
}

I can see the project status text is correctly set. For some reason the color is not getting set in v-chip.

When I inspect the object I found it has following style set

v-chip v-chip--no-color theme--light v-size--small ongoing white--text my-2 caption

For some reason no-color getting set.

Can someone provide some advice on this?

vuetify.js vue.js colors
4 Answers

You can use the :class binding directly with the data prop in vue; it can also be used in conjunction with the regular class attribute.

var app = new Vue({
  el: '#app',
  data: {
    projects: [{
      status: 'ongoing'
    }, {
      status: 'complete'
    }, {
      status: 'overdue'
    }]
  }
})
#chips-container .v-chip.complete {
  background: #3cd1c2;
}
#chips-container .v-chip.ongoing {
  background: #ffaa2c;
}
#chips-container .v-chip.overdue {
  background: #f83e70;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">

  <v-flex xs2 sm4 md2>
    <div class="right" id="chips-container">
      <v-chip v-for="project in projects" small :class="project.status" class="white--text my-2 caption">{{ project.status }}</v-chip>
    </div>
  </v-flex>

</div>

EDIT: Updated snipped to use vuetify

Tarun_Pai_3306970

Simply use the tenary operator like this

 <v-chip
   label
   outlined
   pill                              
   :color="project.status==='complete'?'green':project.status==='ongoing'?'blue':'orange'"
 >
  {{project.status}}</v-chip>
user_91837610

You can give your v-chip an id.

<v-chip id="chip" small :class="`${project.status} white--text caption my-2`">{{project.status}}</v-chip>


<style>
#chip.v-chip.complete {background: #00cc00;}
#chip.v-chip.ongoing{background: #0099ff;}
#chip.v-chip.overdue {background: #ff0000;}
</style>
user_144938300

You can user "active-class", api documentation

<v-flex xs2 sm4 md2>
 <div class="right">
  <v-chip small active-class="white--text my-2 caption">{{project.status}}</v-chip>
  </div>
 </v-flex>
user_23132220
Related