I'm stuck on something very simple probably for VueJS pros.
I have in my data, JSON objects with an attribute that can take the values, 10, 20, 30, 40.
Depending on this value, I want the color of a v-btn to be different.
I tried several methods but each time I got an error
This :
<v-btn
class="flex-column pa-6"
:class="getColor(item.type)"
>
and getColor is defined in method.
getColor: function(type)
{
return this.color[type]
}
I tried this :
<v-btn
class="flex-column pa-6"
v-bind:class= "[item.type == '10' ? color['10'] : color['20'] ]"
>
And that work, but it's always color['20']
Why my condition is not working ?
My v-for above :
<v-card
v-for="incident in incidents"
:key="incident"
class="mx-auto"
>
Your code is looks good, Only one thing I notice is that you have to use !important in the styles to override the default style of v-btn.
Working Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
items: [{type: 10}, {type: 40}, {type: 30}],
color: {
10: 'purple',
40: 'blue',
30: 'green'
}
}
},
methods: {
getColor(type) {
return this.color[type]
}
}
}).blue {
background-color: blue !important;
}
.purple {
background-color: purple !important;
}
.green {
background-color: green !important;
}<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<v-btn v-bind:class="getColor(item.type)">
{{ getColor(item.type) }}
</v-btn>
<br><br>
</div>
</div>If I understood you correctly try like in following snippet:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
incidents: [{type: 10, name: 'aaa'}, {type: 40, name: 'bbb'}, {type: 30, name: 'ccc'}],
colors: [{id: 10, color: 'purple'}, {id: 20, color: 'blue'}, {id: 30, color: 'green'}, {id: 40, color: 'red'}]
}
},
methods: {
getColor(id) {
return this.colors.find(c => c.id === id)?.color || ''
}
}
}).blue {
background-color: blue;
}
.purple {
background-color: purple;
}
.green {
background-color: green;
}<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@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
<v-app>
<v-main>
<v-container>
<v-card
v-for="(incident, i) in incidents"
:key="i"
class="mx-auto"
>
<v-btn
class="flex-column pa-6"
:class= "getColor(incident.type)"
>
{{ incident.name }}
</v-btn>
</v-card>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>