Vue：API获取的数据无法正常显示问题求助

Hey there! I know it's frustrating when data comes through but doesn't render properly—let's break down the most likely issues and fixes for your empty cards.

1. Verify the Data Structure & Field Names #

First, double-check that the data you're receiving matches exactly what your components are expecting.

In your Courses.vue mounted hook, add a detailed console log to inspect the full structure of the course data:

mounted (){
  axios
    .get('https://esl3usx3t7.execute-api.us-east-1.amazonaws.com/testing1/api/get_courses')
    .then((res)=>{
      console.log('Raw course data:', res.data.body); // Add this line
      this.courses = res.data.body
    })
    .catch(err => console.log(err))
}

Look for these things in the console output:

• Is res.data.body an array of objects? If it's a JSON string instead (common with some APIs), you'll need to parse it first:

  this.courses = JSON.parse(res.data.body)
  

• Do each of the course objects have the exact field names your VerticalCard is using? For example:
  • Is it courseImage or course_image?
  • courseCategory vs course_category?
  • creator vs instructor?
    Typos or casing mismatches are the #1 culprit here.

2. Confirm Prop Passing Between Components #

Make sure data is flowing correctly through your component chain:

• In CourseList.vue, add a log to check if the courses prop is being received:

  export default {
    name: "CourseList",
    components: { VerticalCard },
    props: ["courses"],
    mounted() {
      console.log('CourseList received courses:', this.courses); // Add this
    }
  }
  

• In VerticalCard.vue, check if the individual course prop is coming through:

  export default {
    name: "VerticalCard",
    props:["course"],
    mounted() {
      console.log('VerticalCard received course:', this.course); // Add this
    }
  }
  

If either log shows undefined or an empty value, there's a problem with how props are being passed.

3. Check the v-for Key & Rendering #

Ensure your v-for is set up correctly in CourseList.vue:

• You're using course.courseId as the key—confirm that every course object has a unique courseId field. If not, use another unique identifier like course.id (if available) or even the index as a last resort (though index keys aren't ideal for dynamic lists):

  <v-col sm="6" md="4" v-for="(course, index) in courses" v-bind:key="index">
  

4. Inspect Vuetify Card Layout #

Sometimes Vuetify card components need specific layout adjustments to display content properly. Try adding a flex layout class to your v-card in VerticalCard.vue to ensure content stacks correctly, and set a fixed height for the image to prevent layout shifts:

<v-card outlined class="d-flex flex-column">
  <v-img :src="course.courseImage" height="200px" />
  <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>

Start with these checks—most likely it's a data formatting or field name mismatch issue. Let me know what you find in the console logs!

内容的提问来源于stack exchange，提问作者ella