Vue computed is not working properly and is always false Vue computed is not working properly and is always false json json

Vue computed is not working properly and is always false


What do you mean this.price_change_percentage_1h_in_currency ?

In my opinion, you should make computed functions like this.

<td :class="color(currency.price_change_percentage_1h_in_currency)"></td>methods() {   color (currency) {      return currency > 0 ? "inc" : "dec";   }  }


You don't have this param in your data this.price_change_percentage_1h_in_currency

You need to use something like this

methods: {    color(price) {      return price > 0 ? "inc" : "dec";    }  }

and send price from template


In your computed function you are referencing the variable this.price_change_percentage_1h_in_currency, but this variable is neither defined in the data nor is it obtained through props.
So the default value of that will be undefined.

Looking at the HTML part I'm assuming that price_change_percentage_1h_in_currency is part of the object obtained in the response list data from the API.

So what you can do is to compute the data in the then part of the API call.

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;        this.currencies.forEach(currency => {          currency['color'] = currency.price_change_percentage_1h_in_currency > 0 ? "inc" : "dec";        })        console.log(response);      })      .catch(error => {        console.log(error);      });  },

and then in html use it like so

<td :class="currency.color">{{currency.price_change_percentage_1h_in_currency.toFixed(2)}}%</td>