Vue.js/API、v-for、对象数组并在子组件中显示结果

问题描述

我正在（使用 Vue.js）创建一个页面，显示当前的加密货币及其相关信息。 我使用 Axios 从 API (coinranking) 获取这些数据。 我有一个父组件，我在那里进行所有调用，还有一个子组件，我在其中显示所有数据。 我已经能够显示大部分数据，但在子组件中显示某些特定属性时遇到困难：24 小时/7 天/30 天的价格演变。

这是我的主要组件：

<template>
    <div class="globalCard container mt-2 mr-2 ml-2 mx-auto">
        <p class="title list">Crypto-currencies</p>
        <table>
            <thead class="pl-3 pr-3 pt-3 pb-3">
                <tr>
                    <th scope="col">Rank</th>
                    <th scope="col">Name</th>
                    <th scope="col">Symbol</th>
                    <th scope="col">Price</th>
                    <th scope="col">24h</th>
                    <th scope="col">7j</th>
                    <th scope="col">30j</th>
                    <th scope="col">Volume (24h)</th>
                    <th scope="col">Website</th>
                </tr>
            </thead>
            <tbody>
                // This is where I'm struggling
                <tr v-bind:key="index" v-for="(detail,index) in cryptoList">
                    <cryptoItem 
                    v-bind:cryptoList="detail"
                    class="mt-1 mb-1 pt-3 pb-3 pl-3 pr-3"></cryptoItem>
                </tr>
            </tbody>
        </table>
    </div>    
</template>

<script>
import axios from 'axios'
import CryptoItem from './CryptoItem'

const proxyUrl = "https://cors-anywhere.herokuapp.com/"

//The 3 different calls to get the 3 different results (24h/7d/30d)
const coins_url = "https://api.coinranking.com/v2/coins"
const coins_url_7d = "https://api.coinranking.com/v2/coins?timePeriod=7d"
const coins_url_30d = "https://api.coinranking.com/v2/coins?timePeriod=30d"

const access_token = 'hidden'

const reqHeaders = {
    headers: {
        'Access-Control-Allow-Headers': 'x-access-token','x-access-token': `token ${access_token}`
    }
}

export default {
    name: 'HomeResults',data(){
        return {
            cryptoList: [],detail: null
        }
    },mounted(){
        //EVOLUTION 24h
        axios
        .get(proxyUrl + coins_url,{ 
            reqHeaders
        })
        .then((reponseCoins) => {
            // storing 24h in cryptoList
            this.cryptoList.push(reponseCoins.data.data.coins);
            console.log(this.cryptoList)
        })
        .catch((error) => {
            console.error(error)
        })


        // EVOLUTION 7 DAYS
        axios
        .get(proxyUrl + coins_url_7d,{ 
            reqHeaders
        })
        .then((reponse7d) => {
            // storing 7d in cryptoList
            this.change7d = reponse7d.data.data.coins;
            // console.log(this.change7d);
            this.cryptoList.push(this.change7d)
        })
        .catch((error) => {
            console.error(error)
        })

        // EVOLUTION 30 DAYS
        axios
        .get(proxyUrl + coins_url_30d,{ 
            reqHeaders
        })
        .then((reponse30d) => {
            // storing result in cryptoList
            this.change30d = reponse30d.data.data.coins;
            // console.log(this.change30d);
            this.cryptoList.push(this.change30d);
        })
        .catch((error) => {
            console.error(error)
        })

    },computed: {
        
        }
    },components: {
        'cryptoItem' : CryptoItem
    }
}
</script>

<style scoped>

</style>

这是我想要展示我的进化的孩子（我只输入我需要的调用）：

<template>
    <div class="card">
        <td>
            <!-- Here is where I want to call the 24h evolution -->
            <p>24h change is : {{ ?? }}</p>
        </td>
        <td>
            <!-- Here is where I want to call the 7 day evolution -->
            <p>7 days change is : {{ ?? }}</p>
        </td>
        <td>
            <!-- Here is where I want to call the 30 day evolution -->
            <p>30 days change is : {{ ?? }}</p>
        </td>
    </div>    
</template>

<script>
export default {
    name: "cryptoItem",props: ['detail','crypto','cryptoList','sparkline']
}
</script>

<style scoped>

</style>

不同的演变可在 3 个不同的 URL 中使用，因此我需要发出 3 个不同的 get 请求： 这意味着我有 3 个不同的对象数组。 我尝试将这 3 个表存储在 1 (cryptoList) 中，然后运行 ​​v-for（这是我一直在为其他属性所做的并且一直在工作，但仅当我有 1 个数组时）并且我已经尝试在另一个 v-for 中创建一个带有 v-for 的方法，并且能够访问所有数据（24 小时/7 天/30 天），但无法在我的子组件中显示这些数据。

我是 Vue.js 的初学者，所以我可能遗漏了一些东西，这让我有点抓狂，所以任何帮助都将不胜感激。 如果您需要任何额外的代码，请告诉我，我很乐意提供。

干杯，

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）