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>

如您所见，我正在使用计算：color()。一切正常，但它总是将类“dec”添加到表数据中，即使它大于 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，但该变量既没有在数据中定义，也不是通过 props 获得的。
所以它的默认值是undefined。

查看 HTML 部分，我假设 price_change_percentage_1h_in_currency 是从 API 的响应列表数据中获取的对象的一部分。

因此，您可以做的是计算 API 调用的 then 部分中的数据。

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 属性是在组件本身上定义的，而不是在每个货币对象上定义的。所有生成的tds 将引用相同的color 属性，该属性是使用undefined 组件上的属性price_change_percentage_1h_in_currency 计算的，因为该组件没有。

在获取货币对象时将color 属性添加到它们：

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

或者，更好的是，计算模板中的类，将其添加到 tr，这样您就不必为每个子 tds 重复它：

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

演示：

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>