Получить каждый объект из данных API, используя vue и axios - PullRequest
Новая
       19

Получить каждый объект из данных API, используя vue и axios

1 голос
/ 27 марта 2020

Это мой сценарий, который вызывает ax ios и извлекает данные в виде сообщений 

<script>

import axios from 'axios'


export default {
  name: 'App',

  mounted: function () {
    axios.get('API URL')
      .then(response => this.posts = response.data)
  },


  data() {
      return {
        posts: null
      }
    },


};

</script>

Мой код в представлении, который пытается извлечь данные в виде сообщений из сценария выше 

<template>
  <div id="app"> 
    <ul>
      <li v-for="post in posts" v-text="post.createdAt"></li>
    </ul>
  <div>
</template>

ОБРАЗЕЦ ДАННЫХ, извлекаемых из URL-адреса API, выглядит следующим образом

ПЕРЕМЕННЫЕ ОБЪЕКТОВ ПОЗИЦИЙ

Я могу получить API-данные в журнале консоли в виде массива, но при вызове одного объекта из массива, который создан AT, v-text = "post.createdAt" не печатает / не извлекает список созданного списка дат.

Ответы [ 2 ]

0 голосов
/ 27 марта 2020

Только что решил, следуя этому документу. ИСПОЛЬЗУЯ AX IOS ДЛЯ ПОТРЕБЛЕНИЯ API, вот ссылка для этого https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html.

Вышеуказанный код работает нормально. Проблема была в моем URL API, который был вложен в data [data [object]]. Таким образом, как я назвал данные из этого API

из этого 

 mounted: function () {
    axios.get('API URL')
      .then(response => this.posts = response.data)
  }

в этот 

 mounted: function () {
    axios.get('API URL')
      .then(response => this.posts = response.data.data)
  }
0 голосов
/ 27 марта 2020

posts не реагирует, потому что по умолчанию установлено значение null, сделайте его пустым массивом или используйте вместо него Vue.set:

Массив: 

posts: []

Vue .set: 

.then(response => Vue.set(this, 'posts', response.data))

Редактировать

В ответ на комментарии ниже:

Вы должны import Vue from 'vue', чтобы решить Vue не определена ошибка.

Что касается вашего v-for-key, который должен быть уникальным, вам нужно определить уникальный key для элементов v-for. Вы можете просто использовать JSON.stringify(post): 

 <li v-for="post in posts" v-text="post.createdAt" :key="JSON.stringify(post)"></li>
...