Vue вычислено не работает должным образом и всегда ложно

Question

Я просто пытался добавить класс, если число больше 0, и добавить другой класс, если оно меньше 0.

Вот мой код:

var prices = new Vue({
  el: "#prices",
  data: {
    message: "Hello Vue!",
    currencies: [],
  },
  computed: {
    color() {
      return this.price_change_percentage_1h_in_currency > 0 ? "inc" : "dec";
    }
  },
  // Getting the Data DO NOT TOUCH! :)
  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>

Как видите, я делаю это с помощью computed: color (). Все работает, но он всегда добавляет класс «de c» в tabledata, даже если он больше 0.

Пожалуйста, прекратите мои страдания, помогая мне.

Спасибо.

Answer 1

Что вы имеете в виду this.price_change_percentage_1h_in_currency?

На мой взгляд, вам следует создавать такие вычисляемые функции.

<td :class="color(currency.price_change_percentage_1h_in_currency)"></td>

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

Answer 2

У вас нет этого параметра в ваших данных this.price_change_percentage_1h_in_currency

Вам нужно использовать что-то вроде этого

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

и отправить цену из шаблона

Answer 3

В вашей вычисленной функции вы ссылаетесь на переменную this.price_change_percentage_1h_in_currency, но эта переменная не определена в данных и не получена через свойства. Таким образом, значение по умолчанию будет undefined.

Глядя на часть HTML, я предполагаю, что price_change_percentage_1h_in_currency является частью объекта, полученного в данных списка ответов от API.

Итак, что вы можете сделать, так это вычислить данные в части then вызова API.

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);
      });
  },

, а затем в html использовать их так

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

Answer 4

Это потому, что свойство color определено для самого компонента, а не для каждого объекта валюты. Все сгенерированные td s будут относиться к одному и тому же свойству color, которое вычисляется с использованием свойства price_change_percentage_1h_in_currency для компонента, которое равно undefined, потому что у компонента его нет.

Либо добавьте свойство color для объектов валюты при их извлечении:

  .then(response => {
    response.data.forEach(item =>
      item.color = item.price_change_percentage_1h_in_currency > 0 ? "inc" : "dec"
    );
    this.currencies = response.data;
  })

Или, еще лучше, вычислите класс в шаблоне, добавьте его в tr, чтобы вам не приходилось повторять это для каждого ребенка td s:

<tr v-for="currency, index in currencies" :class='[ currency.price_change_percentage_1h_in_currency > 0 ? "inc" : "dec" ]'>

demo:

var prices = new Vue({
  el: "#prices",
  data: {
    message: "Hello Vue!",
    currencies: [],
  },
  computed: {
    color() {
      return this.price_change_percentage_1h_in_currency > 0 ? "inc" : "dec";
    }
  },
  // Getting the Data DO NOT TOUCH! :)
  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;
      })
      .catch(error => {
        console.log(error);
      });
  },
})

.dec {
  background-color: #ffaaaa;
}

.inc {
  background-color:#aaffaa;
}

.as-console-wrapper {
  height: 0;
}

<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" :class='[ currency.price_change_percentage_1h_in_currency > 0 ? "inc" : "dec" ]'>
      <td v-html="index + 1"></td>
      <td>{{currency.price_change_percentage_1h_in_currency.toFixed(2)}}%</td>
      <td>{{currency.price_change_percentage_24h.toFixed(2)}}%</td>
      <td>{{currency.price_change_percentage_7d_in_currency.toFixed(2)}}%</td>
  </tbody>
</table>