Dynamic class based on data attribute

Question

I have a collection of cards which are iterated. Every card has a color attribute and I want to use this as part of the class of a div to give it a dynamic background. The current code is:

      <div v-for="card in cards" :key="card.id">
        <div class="bg-red-600">{{ card.category | uppercase }}</div>
        <div>{{ card.title }}</div>
      </div>

In this case, in the value bg-red-600, red should be replaced with card.color. How can I do this?

wau · Accepted Answer · 2019-08-15 10:59:01Z

1

You have many options. In template:

  <div :class="`bg-${card.color}-600`">{{ card.category | uppercase }}</div>

Via separate method:

methods: {
  colorMethod(color) {
    return `bg-${color}-600`;
  },
},

<div :class="colorMethod(card.color)">{{ card.category | uppercase }}</div>

Hope it helps.

answered Aug 15, 2019 at 10:59

wau

4263 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wau Over a year ago

@John Nice to hear!

Collectives™ on Stack Overflow

Dynamic class based on data attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related