javascript - VueJS数据未响应式(Reactive)安装

我有一个返回所有货币汇率的API，我在getRate()上使用了函数mounted，但是rate['usd']是undefined，如果我再次在该页面上调用该函数，它将返回实际数据，我尝试了 beforeCreated，但是它们不起作用，如何使数据在负载时反应性还是我做错了什么？

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

最佳答案

这样行吗？

<template>
  <span v-text="rate.usd"></span>
</template>

<script>
data() {
    return {
        rate: null
    }
},
methods: {
    getRate() {
        const rate = {}
        this.$vs.loading()
        this.$http.post('wallet/rate' ,[])
        .then(response => {
            for(let key in response.data.data.data){
                rate[response.data.data.data[key].name] = response.data.data.data[key].value
            }
            this.$vs.loading.close()
            this.rate = rate
        })
        .catch(error => {
            this.$vs.loading.close()
        })
    },
},
mounted() {
  this.getRage()
}
</script>