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

我正在使用 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新手,我已经研究这个问题两天了,但仍然不知道我的错是什么。非常感谢大家!


红糖糍粑
浏览 118回答 1
1回答

叮当猫咪

其实超级简单!它返回一个带有statusCode和的 JSON 对象body。因此,在您的课程组件中,您确实this.courses = res.data.body希望实际数据位于正文中。问题是主体并不直接包含数据,它本身也有 astatusCode和 a body,所以你看到的两张卡片就是那两张。您所要做的就是更深入一层。this.courses = res.data.body.body
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript