Vue.js dynamic class name?

Question

I need a color degradation depending on a review grade. I was hoping to get something done in Vue.js like so:

<div class="review" :style="reviewColor(hotel.average)">

And in my methods I have something like this:

reviewColor() {
    return 'green';
}

Unfortunately this does not provide me with a 'green' class. I was hoping to do my color calculation in the method.

If the grade is less than a 7 it needs to be a specific color, if between 7 and 8 and higher than 8.

I need these calculations in a clean matter. Is there any alternative?

I can't inline it because I have 2 elements that need to respond to a class.

You need to specify the style aspect that you want to change. style="green" isn't valid. Try :style="{color:reviewColor(hotel.average)}" — RainingChain
– RainingChain, Commented Jul 17, 2017 at 13:24

Decade Moon · Accepted Answer · 2017-07-17 13:21:49Z

9

Unfortunately this does not provide me with a 'green' class.

You need to bind to class, not style:

<div class="review" :class="reviewColor(hotel.average)">

reviewColor(grade) {
  if (grade < 7) {
    return 'red';
  } else if (grade < 9) {
    return 'yellow';
  } else {
    return 'green';
  }
}

answered Jul 17, 2017 at 13:13

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

1 Comment

Oh wow. That's what you get when you do a quick re-factor. Solved everything in 46 seconds. Haha thanks!