Changing v-card background color based on card value

user_12318088 0
Viewed 2396

I am currently working with a v-row of v-cards and am struggling to change the background color of a certain card based on the card's value. I have it set up here so that if the value of the card is equal to the current value (input by the user), then that card's background should be white, #FFFFFF, otherwise the card background should be black, #000000. This is what I have setup, and for some reason it is not working. Does anyone know what I have wrong?

<v-row>
    <v-card
      v-for="values in cards"
      :key="value"
      color="currVal == value ? '#FFFFFF' : '#000000'"
      :class="'ma-2 pa-3'"
      outlined
      tile
    >{{ value }}</v-card>
</v-row>
vue.js
1 Answers

Since your color is a javascript expression, you need to v-bind color parameter:

<v-row>
    <v-card
      v-for="value in cards"
      :key="value"
      :color="currVal === value ? '#FFFFFF' : '#000000'"
      class="ma-2 pa-3"
      outlined
      tile
    >{{ value }}</v-card>
</v-row>

Minor: since class is just a string, no need v-bind.

user_49834500
Related