Javascript 多个v-Bind-子组件-API调用-VueJ_Javascript_Api_Data Binding_Components_Vuejs3

Javascript 多个v-Bind-子组件-API调用-VueJ

javascript api data-binding

Javascript 多个v-Bind-子组件-API调用-VueJ,javascript,api,data-binding,components,vuejs3,Javascript,Api,Data Binding,Components,Vuejs3,（我是Vuejs和API处理的初学者）我目前正在使用加密货币API，并尝试调用一个属性（从一个子组件创建一个列表），向我展示硬币在24小时/7天/30天内的演变。问题是，为了访问包含这些对象和属性的数据，我必须调用不同的url： 24小时： 7d： 30d：然而，由于我必须对这些URL发出get请求，以便每次收集并存储其数据，这意味着我有3个不同的位置存储每个信息。我能够从第一个绑定数据并将其发送给孩子，但也希望为其他两个绑定数据。我尝试了许多方法，但找不到一种方法来进行多个绑定（

（我是Vuejs和API处理的初学者）我目前正在使用加密货币API，并尝试调用一个属性（从一个子组件创建一个列表），向我展示硬币在24小时/7天/30天内的演变。问题是，为了访问包含这些对象和属性的数据，我必须调用不同的url：

24小时：
7d：
30d：

然而，由于我必须对这些URL发出get请求，以便每次收集并存储其数据，这意味着我有3个不同的位置存储每个信息。我能够从第一个绑定数据并将其发送给孩子，但也希望为其他两个绑定数据。我尝试了许多方法，但找不到一种方法来进行多个绑定（每个绑定一个：24小时/7天/30天）

以下是我当前的代码：

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

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

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

export default {
    name: 'HomeResults',
    data(){
        return {
            limit: 5,
            cryptoList: [],
            detail: null,
            globVol24: null,
            totalCoins: null,
            marketCap: null,
            evol7d: null,
            evol30d: null
        }
    },
    mounted(){
        //COINS DATA
        axios
        .get(proxyUrl + coins_url, { 
            reqHeaders
        })
        .then((reponseCoins) => {
            // console.log(reponseCoins.data)
            //COINS DATA: this is where I store the first data (24h)
            this.cryptoList = reponseCoins.data.data.coins;
        })
        .catch((error) => {
            console.error(error)
        })


        // EVOLUTION 7 DAYS
        axios
        .get(proxyUrl + coins_url_7d, { 
            reqHeaders
        })
        .then((reponse7d) => {
            console.log(reponse7d.data)
           // this is where I store the first data (7d)
            this.evol7d = reponse7d.data.data.coins;
        })
        .catch((error) => {
            console.error(error)
        })

        // EVOLUTION 30 DAYS
        axios
        .get(proxyUrl + coins_url_30d, { 
            reqHeaders
        })
        .then((reponse30d) => {
            console.log(reponse30d.data)
            // this is where I store the first data (30d)
            this.evol30d = reponse30d.data.data.coins;
        })
        .catch((error) => {
            console.error(error)
        }),
       computed: {
        // Limiting results showing
        limitCryptoRes: function() {
            return this.limit ? this.cryptoList.slice(0, this.limit) : this.cryptoList;
        }
      },
      components: {
        'cryptoItem' : CryptoItem
      }
}

然后我将数据绑定到我的组件：

<tr v-bind:key="index" v-for="(detail, index) in limitCryptoRes">
    <cryptoItem 
     v-bind:cryptoList="detail"
     class="mt-1 mb-1 pt-3 pb-3 pl-3 pr-3"></cryptoItem>
</tr>

我尝试了几种绑定

cryptoList

、

evol7d

和

evol30d

的方法，但都没有成功。很明显我在这里遗漏了一些东西

如果你需要额外的信息，不要犹豫

提前感谢您的帮助

您正在尝试迭代从

加密列表

计算的

limitCryptoRes

。但是向

加密列表

添加数据的唯一位置是第一个get请求

您需要将这些请求中的每个响应推送到

加密列表

数组，如下所示：

axios.get(proxyUrl + coins_url, { reqHeaders })
  .then((responseCoins) => {
    this.cryptoList.push(reponseCoins.data.data.coins)
  })
  .catch((err) => {
    console.error(err)
  })