I'm trying to create a simple marketcap checker for crytpo (like coinmarketcap) using coingecko api.

I can fetch the data and render it, no problem with that. And I fetch the data 2 times per minutes.

But now, I would like to check if the new price is higher or lower than the last price.

I do a v-for loop and I pass some data in my "tokenComponent" for rendering the data like this :

<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>

and the 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>

I just would like put a conditionnal class in price data if the last price is higher or lower than the new one...

(I'm new in Vuejs... ;) )

CodePudding user response：

You should store previous prices to calculate if the last price is higher or lower than the new one. Use Array for that.

Added small example using setInterval instead of fetching new prices to display indicators

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>