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