我正在使用 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ò)是什么。非常感謝大家!
Vue:從 API 獲取的數(shù)據(jù)未顯示
紅糖糍粑
2023-09-14 18:14:03