第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Vue:從 API 獲取的數(shù)據(jù)未顯示

Vue:從 API 獲取的數(shù)據(jù)未顯示

紅糖糍粑 2023-09-14 18:14:03
我正在使用 Vuetify 和 axios 制作一個(gè)電子學(xué)習(xí)網(wǎng)站。這是我的代碼課程.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>提取數(shù)據(jù)是因?yàn)樗谖沂褂每刂婆_(tái)日志時(shí)出現(xiàn)。但卡片上只有兩張,而且沒有任何內(nèi)容。我想知道我做錯(cuò)了什么。我是Vue新手,我已經(jīng)研究這個(gè)問題兩天了,但仍然不知道我的錯(cuò)是什么。非常感謝大家!
查看完整描述

1 回答

?
叮當(dāng)貓咪

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊

其實(shí)超級(jí)簡(jiǎn)單!

它返回一個(gè)帶有statusCode和的 JSON 對(duì)象body。因此,在您的課程組件中,您確實(shí)this.courses = res.data.body希望實(shí)際數(shù)據(jù)位于正文中。

問題是主體并不直接包含數(shù)據(jù),它本身也有 astatusCode和 a?body,所以你看到的兩張卡片就是那兩張。

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

this.courses?=?res.data.body.body


查看完整回答
反對(duì) 回復(fù) 2023-09-14
  • 1 回答
  • 0 關(guān)注
  • 151 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)