Vue axios 使用 - 从 api 获取数据

Question

我有这个工作代码。

<template>
<v-card-text class="text-center">{{ ethPrice.ethereum.usd }} US$</v-card-text>
</template>

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

但是，当我对另一个做同样的事情时，我得到了这个错误。

<template>
<v-card-text >{{ slpPrice.smooth-love-potion.usd }}</v-card-text>
</template>

 data() {
  return {
  slpPrice: { "smooth-love-potion": { "usd": "" } },
 };
},
mounted() {
 axios
  .get(
    "https://api.coingecko.com/api/v3/simple/price?ids=smooth-love-potion&vs_currencies=usd"      
  )
  .then((response) => (this.slpPrice = response.data));

为什么一个工作，另一个不工作？我怎样才能解决这个问题？我试图使它成为反应对象，但第一个不起作用。

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

Answer 1

正如你看到上面的评论，你必须这样访问它。

<template>
  <v-card-text >{{ slpPrice['smooth-love-potion'].usd }}</v-card-text>
</template>

...

Vue axios 使用 - 从 api 获取数据

Vue axios fetch data from api with -

api

vue.js

axios

vuejs2

vuetify.js