[Vuejs]-Cannot display vue data array in html

by

0👍

✅

Try this

axios(proxyurl + url, {headers})
    .then(result => {
        this.bitcoin = result.data
    }).catch(err => {
        console.error("error",err)
    })

This should work.

It is working. Check your response there is no price field.

[
    {
        "id": "bitcoin", 
        "name": "Bitcoin", 
        "symbol": "BTC", 
        "rank": "1", 
        "price_usd": "9287.63433026", 
        "price_btc": "1.0", 
        "24h_volume_usd": "22493494863.2", 
        "market_cap_usd": "167413899690", 
        "available_supply": "18025462.0", 
        "total_supply": "18025462.0", 
        "max_supply": "21000000.0", 
        "percent_change_1h": "0.12", 
        "percent_change_24h": "0.85", 
        "percent_change_7d": "0.2", 
        "last_updated": "1572697240", 
        "price_eur": "8316.11062878", 
        "24h_volume_eur": "20140585326.6", 
        "market_cap_eur": "149901736127"
    }
]

use the correct attribute name.

0👍

There are some reactivity caveats in Vue JS:
You should check out those here: https://v2.vuejs.org/v2/guide/list.html#Caveats

In your case, you’re defining a blank array and then directly assigning a new array after the request is successful. Hence it is changing the length of the array and it becomes non-reactive.

In an ideal way, you should set bitcoin:null and put v-if='bitcoin' before rendering the UI. So the template will not render until the response has arrived and you can also set a nice loader in v-else.

Leave a comment