渲染后如何检查vue组件中的旧数据？

Question

我正在尝试使用 coingecko api.

为 crytpo（如 coinmarketcap）创建一个简单的市值检查器

我可以获取数据并进行渲染，没问题。我每分钟获取数据 2 次。

但是现在，我想看看新价格是比上次价格高还是低。

我执行了一个 v-for 循环，并在我的“tokenComponent”中传递了一些数据，以便像这样呈现数据：

<template>
  <div id="app">
    <div class="container mx-auto">
      <div class="pt-6">
        <h1 class="text-2xl font-bold">Crypto Monkey Cap</h1>
        <div v-for="token in listTokens" :key="token.id">
          <div class="py-6">
            <token-component
              :name="token.name"
              :price="token.current_price"
              :mcap="token.market_cap"
            ></token-component>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TokenComponent from "./components/tokenComponent.vue";

export default {
  name: "App",
  components: {
    TokenComponent,
  },
  data() {
    return {
      listTokens: [],
      lastPrice: 0
    };
  },
  mounted() {
    this.getTokens();

    setInterval(() => {
      this.getTokens()
    }, 30000);
  },
  methods: {
    getTokens() {
    fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd")
      .then((response) => response.json())
      .then((data) => {
        this.listTokens = data;
      });
    }
  }
};
</script>

和 tokenComponent :

<template>
  <div class="py-4 border-2 rounded-lg">
    <div class="flex justify-around">
      <h2>{{ name }}</h2>
      <h2>{{ price }} $</h2>
      <h2>{{ mcap }} $</h2>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: { required: true },
    price: { required: true },
    mcap: { required: true }
  }
};
</script>

如果最后价格高于或低于新价格，我只想在价格数据中加入一个条件 class...

（我是 Vuejs 的新手...;））

Answer 1

您应该存储以前的价格以计算上次价格是高于还是低于新价格。为此使用 Array。

添加了使用 setInterval 而不是获取新价格来显示指标的小示例

new Vue({
  el: "#app",
  data: () => ({
    prices: [1]
  }),
  methods: {
    stonks(index) {
            if (index > 0) {
        return (this.prices[index] - this.prices[index-1]) > 0
            ? 'green' : 'red'
      }
    }
  },
  
  mounted() {
    setInterval(() => {
      this.prices.push(Math.floor(Math.random() * 10) + 1)
    }, 2000)
  }
})

.prices {
  display: flex;
  flex-direction: row;
  padding: 10px;
}

.price {
  border:1px solid #bbb;
  border-radius: 5px;
  padding: 10px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  margin-right: 5px;
  position: relative;
}

.stonks {
  position: absolute;
  background: grey;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  top: 0;
  right: 0;
  margin-top:-8px;
  margin-right:-8px
}

.stonks.red { background: red; }
.stonks.green { background: green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="prices">
    <div 
      v-for="(price, index) in prices" 
      :key="index" 
      class="price"
     >
      {{ price }}
      <div class="stonks" :class="stonks(index)" />
    </div>
  </div>
</div>

渲染后如何检查vue组件中的旧数据？

How check old data in vue component after rendering?

javascript

rendering

vue.js

vue-component

cryptocurrency