Vue：从 API 获取的数据未显示

Question

我正在使用 Vuetify 和 axios 制作一个电子学习网站。这是我的代码课程.vue<template><div>  <v-container>      <v-row>          <v-col md="3" offset-lg="1">              <Categories />          </v-col>          <v-col md="9" lg="7">              <CourseList v-bind:courses="courses"/>          </v-col>      </v-row>  </v-container></div></template><script>import CourseList from '@/components/courses/CourseList.vue'import Categories from '@/components/courses/Categories.vue'import axios from 'axios'export default {  components: {    CourseList,    Categories  },  data() {         return {            courses: []         }  },  mounted (){            axios                .get('https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_courses')                .then((res)=>{this.courses = res.data.body})                .catch(err => console.log(err))  }}</script>课程列表.vue<template>  <div>      <h2>Courses</h2>      <v-row>          <v-col sm="6" md="4" v-for="course in courses" v-bind:key="course.courseId">                         <VerticalCard v-bind:course="course"/>                   </v-col>      </v-row>        </div></template><script>import VerticalCard from '@/components/cards/VerticalCard.vue'export default {    name: "CourseList",    components: {        VerticalCard    },    props: ["courses"]}</script>VerticalCard.vue<template>  <v-card    outlined  >    <v-img      :src="course.courseImage"      height="100%"    />    <v-card-subtitle class="font-weight-light">      {{ course.courseCategory}}    </v-card-subtitle>    <v-card-title class="subtitle-1 font-weight-bold">      {{ course.courseTitle }}    </v-card-title>    <v-card-subtitle class="font-weight-medium">      {{ course.creator }}    </v-card-subtitle>    <v-card-actions>      <v-btn class="pa-5 primary white--text" text>          VIEW      </v-btn>    </v-card-actions>  </v-card></template>提取数据是因为它在我使用控制台日志时出现。但卡片上只有两张，而且没有任何内容。我想知道我做错了什么。我是Vue新手，我已经研究这个问题两天了，但仍然不知道我的错是什么。非常感谢大家！

Answer 1

其实超级简单！

它返回一个带有statusCode和的 JSON 对象body。因此，在您的课程组件中，您确实this.courses = res.data.body希望实际数据位于正文中。

问题是主体并不直接包含数据，它本身也有 astatusCode和 a body，所以你看到的两张卡片就是那两张。

您所要做的就是更深入一层。

this.courses = res.data.body.body