Estoy tratando de crear un verificador de capitalización de mercado simple para crypto (como coinmarketcap) usando coingecko api.
Puedo obtener los datos y renderizarlos, no hay problema con eso. Y busco los datos 2 veces por minuto.
Pero ahora, me gustaría comprobar si el nuevo precio es más alto o más bajo que el último precio.
Hago un bucle v-for y paso algunos datos en mi "tokenComponent" para representar los datos de esta manera:
<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>y el 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>Solo me gustaría poner una clase condicional en los datos de precios si el último precio es más alto o más bajo que el nuevo...
(Soy nuevo en Vuejs... ;) )
Debe almacenar los precios anteriores para calcular si el último precio es más alto o más bajo que el nuevo. Usa Array para eso.
Se agregó un pequeño ejemplo usando setInterval en lugar de obtener nuevos precios para mostrar indicadores
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>