Currently, I am in the process of developing a straightforward market cap checker for cryptocurrencies similar to coinmarketcap by utilizing the Coingecko API.
I have successfully managed to retrieve and display the data without any issues. Additionally, I update the data every 2 minutes.
However, my next objective is to determine whether the latest price is higher or lower than the previous price.
To achieve this, I utilize a v-for loop and send specific data to my "tokenComponent" for rendering purposes as shown below:
<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>
In addition, here's the tokenComponent code:
<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>
My goal now is to include a conditional class in the price data based on whether the last price is higher or lower than the new one...
(As a beginner in Vue.js, any assistance would be greatly appreciated!)