Vuetify conditional color parameter on element

user_5091805 0
Viewed 1005

I'm using vuetify and it comes with an inbuilt color parameter and some predefined colors. I am dynamically loading data to components and I want the color of the component to be dependent on the datas value, eg. complete: true, then color = green

example of what I'm trying to do

<component :color="'deep-purple accent-4' if item.complete else 'grey'" v-for="n in items"></component>

The above example is rough and not legitimate code but I think highlights what I want to do. I know I could create my own classes and use the conditional class method but if possible Id like to stick with inbuilt Vuetify stuff

vuetify.js vue.js javascript
2 Answers

Apart from using a method like you already posted in your answer, you could also do it inline with a ternary-operator.

<component :color="n.complete ? 'green' : 'grey'" v-for="n in items"></component>
user_123913990

I used a method to conditionally return the required value

<component :color="color(n.complete)" v-for="n in items"></component>

then created a new method

color: function(complete) {
    if (complete) {
        return 'green'
    } else {
        return 'grey'
    }
}
user_50918050
Related