Change vuetify v-chip color dynamically - vue.js

Question

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?

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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>