My API is supposed to return all the currency rates. I am using a function called getRate() in the mounted section, but the value of rate['usd'] is showing as undefined. However, if I call the function again on that page, it returns the actual data. I have tried using beforeCreated and beforeMounted but they do not seem to be working. How can I make the data reactive on load, or am I doing something wrong?
<template>
<span v-text="rate['usd']"></span>
</template>
<script>
data() {
return {
rate: null
}
},
methods: {
getRate() {
this.$vs.loading()
this.$http.post('wallet/rate' ,[])
.then(response => {
for(let key in response.data.data.data){
this.rate[response.data.data.data[key].name] = response.data.data.data[key].value
}
this.$vs.loading.close()
})
.catch(error => {
this.$vs.loading.close()
})
},
},
mounted() {
this.getRate()
}
</script>