I am looking for a way to dynamically change the background color based on a review rating using Vue.js. Ideally, I would like to achieve this with the following code:
<div class="review" :style="reviewColor(hotel.average)">
In my methods section, I currently have:
reviewColor() {
return 'green';
}
However, this approach does not actually apply the 'green' color as intended. I need a more sophisticated way to handle the color calculation.
Specifically, I want the color to change based on the review rating - below 7, between 7 and 8, and above 8.
I am seeking a cleaner solution for these calculations. Is there an alternative method that can be implemented?
It is important to note that I cannot inline this style change because two elements need to respond to the class update.