[FIXED] How to fetch data from object in axios vue

Issue

This is my code.

export default {
 components: {
    draggable,
},
data() {
return {
  ethPrice: null,
 };
},
mounted() {
 axios
  .get(
    "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd"      
   )
  .then((response) => (this.ethPrice = response.data));

And the response is

{ "ethereum": { "usd": 2037.4 } }

This is the template i did.

<v-card-text>{{ ethPrice }}</v-card-text>

How I can get inside "ethereum" and then inside "usd" and fetch only the value?

Solution

setup your data like

  ethPrice: {ethereum{usd:""}}

you need to set it so it remains reactive

.then((response) => (this.$set(this.ethPrice,response.data)));

and then access it like

{{ethPrice.ethereum.usd}}

check the Vue 2 guide on reactivity https://v2.vuejs.org/v2/guide/reactivity.html for a more detailed discussion

Answered By - Keith Nicholas

Answer Checked By - Robin (PHPFixing Admin)