[Vuejs]-Can get variable from secondary table in api on a list page, but not on single item page

by

0👍

✅

I think you might have misspelled your variable in the second component, viewEnrolment. You have the plural enrollments:

  this.enrolments = response.data.data

But in your component HTML, you’re using the singular enrollment:

<p>Course id:{{ enrolment.course.id }}</p>

Also, this is just an additional tidbit: In Vue components, I would typically try to call API’s in the created() hook, not the mounted() hook. created() comes before, and is called when data observation is set up, but before the component is actually mounted to HTML.

This could prevent weird issues where when trying to use this.enrolment in your HTML, it’s not actually being available yet, because the API request isn’t finished.

Leave a comment