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.

Answer 1

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