使用 vue 和 axios 从 API 数据中获取每个对象

Question

这是我的脚本，它调用 axios 并以帖子的形式获取数据

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

从 API URL 获取的 SAMPLE 数据如下所示

POSTS OBJECT VARIABLES

我能够在控制台日志中获取 API DATA 作为一个数组，但是当我从 createdAT 数组中调用一个对象时，v-text = "post.createdAt" 不会打印/获取 createdAt 日期列表的列表。

Answer 1

刚刚解决了这个问题，使用 AXIOS TO CONSUME API 这里是那个 https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html 的链接。

我发布的以上代码工作正常。问题出在我的 API URL 上，它嵌套在 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)
  }

Answer 2

posts 不是响应式的，因为默认值为 null，请将其设为空数组，或者改用 Vue.set：

数组：

posts: []

Vue.set：

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

编辑

针对以下cmets：

您必须import Vue from 'vue' 才能解决Vue 未定义错误。

关于你的v-for-key 需要是唯一的，你需要在 v-for 元素上定义一个唯一的key。你可以使用JSON.stringify(post):

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