CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Ari
Ari

Reputation: 6149

Vuetify conditional color parameter on element

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

Upvotes: 4

Views: 2156

Answers (2)

discolor
discolor

Reputation: 1376

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>

Upvotes: 6

Ari
Ari

Reputation: 6149

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

Upvotes: 0

Related Questions