<template>
    <h1 >Coin dashboard</h1>
    <div >
        <div >
            <div >
                <div >
                    <table >
                        <thead >
                            <tr>
                                <th></th>
                                <th scope="col" >
                                    Coin
                                </th>
                                <th scope="col" >
                                    Price
                                </th>
                                <th scope="col" >
                                    24h
                                </th>
                                <th scope="col" >
                                    7d
                                </th>
                                <th scope="col" >
                                    30d
                                </th>
                                <th scope="col" >
                                    market cap
                                </th>
                            </tr>
                        </thead>
                        <tbody v-for="(item, index) in list.coinsList" >
                            <tr >
                                <td >
                                    {{ index   1}}
                                </td>
                                <td >
                                    <img  :src="images[index]">
                                    <span >{{coins[index]}}</span>
                                </td>
                                <td >
                                     ${{ item.current_price.usd }}
                                </td>
                                <td >
                                    {{ item.price_change_percentage_24h }}%
                                </td>
                                <td >
                                    {{ item.price_change_percentage_7d }}%
                                </td>
                                <td >
                                    {{ item.price_change_percentage_30d }}
                                </td>
                                <td >
                                    ${{ item.market_cap.usd }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import { reactive } from 'vue'
import { api } from '../services/api'
import bitcoinImg from "../assets/bitcoin.png"
import dacxiImg from "../assets/dacxi.png"
import ethImg from "../assets/ethereum.png"
import atomImg from "../assets/atom.png"
import lunaImg from "../assets/luna.png"

const coins = ['bitcoin', 'dacxi', 'ethereum', 'cosmos', 'terra-luna-2']
const images = [bitcoinImg, dacxiImg, ethImg, atomImg, lunaImg]
const list = reactive({
    coinsList: [],
});

coins.forEach((item) => {
    api.get(`/coins/${item}`)
    .then((response) => {
        list.coinsList.push(response.data.market_data)
    })
})

</script>

Hello guys, i'm trying to learn vue and i'm facing this problem. Is there a better way to do this? I tried some other things like adding it on a onMounted but it didnt work. What should i do to reduce sometimes the list showing up out of order? How can i add the name and images to the json so i dont show them in the wrong order?

Example rendered

CodePudding user response：

You could do something like this:

let currencies = [
 {
   coin: 'bitcoin',
   image: bitcoinImg,
   data: []
 },
 {
   coin: 'dacxi',
   image: dacxiImg
   data: []
 },
etc...
]

currencies.forEach(item => {
  api.get(`/coins/${item.coin}`)
    .then((response) => {
        item.data.push(response.data.market_data)
    })
}

CodePudding user response：

Promise.all(
    coins.map((item, index) =>
        api
        .get(`/coins/${item}`)
        .then((response) => ({ 
          ...response.data.market_data, 
          _coin: item, // add _coin - which is coins[index]
          _image: images[index]  // add _image - which is images[index]
        }))
    )
).then((d) => (list.coinsList = d));

subtle changes to HTML as noted

<tbody v-for="(item, index) in list.coinsList" >
  <tr >
    <td >
      {{ index   1}}
    </td>
    <td >
      <img  :src="item._image"> <!-- changed -->
      <span >{{item._coin}}</span> <!-- changed -->
    </td>
    <td >
      ${{ item.current_price.usd }}
    </td>
    <td >
      {{ item.price_change_percentage_24h }}%
    </td>
    <td >
      {{ item.price_change_percentage_7d }}%
    </td>
    <td >
      {{ item.price_change_percentage_30d }}
    </td>
    <td >
      ${{ item.market_cap.usd }}
    </td>
  </tr>
</tbody>