I am facing an issue where I need to add a specific class if a number is greater than 0 and another class if it is less than 0.
Here is the code snippet that I have been working on:
var prices = new Vue({
el: "#prices",
data: {
message: "Hello Vue!",
currencies: [],
},
computed: {
color() {
return this.price_change_percentage_1h_in_currency > 0 ? "inc" : "dec";
}
},
// Fetching Data - DO NOT MODIFY
mounted: function() {
axios.get("https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h%2C%2024h%2C7d")
.then(response => {
this.currencies = response.data;
console.log(response);
})
.catch(error => {
console.log(error);
});
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="prices">
<tbody>
<tr v-for="currency, index in currencies">
<td v-html="index + 1"></td>
<td :class="color">{{currency.price_change_percentage_1h_in_currency.toFixed(2)}}%</td>
<td :class="color">{{currency.price_change_percentage_24h.toFixed(2)}}%</td>
<td :class="color">{{currency.price_change_percentage_7d_in_currency.toFixed(2)}}%</td>
</tbody>
</table>
Although the code appears to be correct with the computed property for adding classes based on conditions, it always applies the "dec" class to the table data, even when the value is greater than 0.
I hope someone can assist me in resolving this issue. Your help would be greatly appreciated.
Thank you.