Как извлечь данные из объекта в axios vue

#vue.js #vuejs2 #axios #vuetify.js

Вопрос:

Это мой код.

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

И ответ такой

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

Это шаблон, который я сделал.

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

Как я могу войти в «ethereum», а затем в «usd» и получить только стоимость?

Ответ №1:

настройте свои данные следующим образом

   ethPrice: {ethereum{usd:""}}
 

вам нужно настроить его так, чтобы он оставался реактивным

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

а затем получить к нему доступ, как

 {{ethPrice.ethereum.usd}}
 

проверьте руководство Vue 2 по реактивности https://vuejs.org/v2/guide/reactivity.html для более подробного обсуждения

Комментарии:

1. Извините, но с вашим кодом я получил эту ошибку. prnt.sc/1amh2lx

2. Привет, теперь это работает, но мне пришлось пропустить реакцию .then((response) => (this.ethPrice = response.data)); и объект, объявленный таким образом. ethPrice: { "ethereum": { "usd": "" } } Спасибо!!!