无法使用Vue和Axios从API获取数据

Question

我正在创建一个电子学习网站，那里有你可以选择的课程卡片。这是我的密码

<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:list="list"/>
          </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 {
            list: []
         }
  },
  mounted: function() {
            axios
                .get('https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course')
                .then(res => this.list = res.body)
                .catch(err => console.log(err))
        }
}
</script>

课程ist.vue

<template>
  <div>
      <h2>Courses</h2>

      <v-row>
          <v-col sm="6" md="4">
              <VerticalCard v-bind:list="list"/>
              
          </v-col>
      </v-row>
      
  </div>
</template>

<script>
import VerticalCard from '@/components/cards/VerticalCard.vue'

export default {
    name: "CourseList",
    components: {
        VerticalCard
    },
    props: ["list"]
}
</script>

我的问题是我无法从API链接获取数据-

我想知道我做错了什么。我也尝试使用{{list}}来获取数据，但没有成功。我现在的目标是得到所有的数据，即使它看起来很乱。抱歉我英语不好，谢谢你！

Answer 1

axios请求的每个数据响应都将封装在数据对象中，因此您需要从数据中获取身体数据。正文。您可以通过控制台进行检查。日志（res）

const uri = 'https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_course'
axios
  .get(uri)
  .then(res => {
    console.log(res)
    let {data: {statusCode, body}} = res
    if(statusCode == 200)
      this.list = [...body]
  })
  .catch(err => console.log(err))

Answer 2

axios将数据包装到数据对象中，而不是。然后（res=