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

This page reading and displaying a full table from an API works perfectly;

<template>
    <b-col>
        <h2>    
            Enrolments
            <b-button :to="{ name: 'createEnrolment', params: { id: this.$route.params}}" variant="warning" >Create</b-button>
        </h2>

        <b-card
            v-for="enrolment in enrolments"
            :key="enrolment._id"
        >
            <p>Course id:{{ enrolment.course.id }}</p>
            <p>Course title:{{ enrolment.course.title }}</p>    
            <p>Status:{{ enrolment.status }}</p>
            <p>Created:{{ enrolment.created_at }}</p>
            <p>Date:{{ enrolment.date }}</p>
            <p>Lecturer:{{ enrolment.lecturer.name }}</p>
            <p>Lecturer email:{{ enrolment.lecturer.email }}</p>
            <p>Updated:{{ enrolment.updated_at }}</p>
            <p>Time:{{ enrolment.time }}</p>
            <b-button :to="{ name: 'viewEnrolment', params: { id: enrolment.id}}" variant="warning">View</b-button>
        </b-card>
    </b-col>
</template>

<script>
import axios from '@/config'

export default {
    name: "viewEnrolments",
    components: {},    
    data(){
        return {
            enrolments: []
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            let token = localStorage.getItem('token')

            axios
            .get(`/enrolments`, 
            {
                headers: {
                    "Accepted": `application/json`, 
                    "Authorization": `Bearer ${token}`
                }
            })          
            .then(response => {
                console.log(response.data)
                this.enrolments = response.data.data
            })
            .catch(error => console.log(error))
        }
    }
}
</script>

However, when I try to view just one entry to the enrolments table, it cannot recognise or get that data from the courses table, giving the error: "TypeError: Cannot read properties of undefined (reading 'id')", which comes from line 8: <p>Course id:{{ enrolment.course.id }}</p>

<template>
    <b-col>
        <h2>    
            Enrolments
        </h2>

        <b-card>
            <p>Course id:{{ enrolment.course.id }}</p>
            <p>Course title:{{ enrolment.course.title }}</p>    
            <p>Status:{{ enrolment.status }}</p>
            <p>Created:{{ enrolment.created_at }}</p>
            <p>Date:{{ enrolment.date }}</p>
            <p>Lecturer:{{ enrolment.lecturer.name }}</p>
            <p>Lecturer email:{{ enrolment.lecturer.email }}</p>
            <p>Updated:{{ enrolment.updated_at }}</p>
            <p>Time:{{ enrolment.time }}</p>
        </b-card>
    </b-col>
</template>

<script>
import axios from '@/config'

export default {
    name: "viewEnrolment",
    components: {},    
    data(){
        return {
            enrolment: []
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            let token = localStorage.getItem('token')
            
            axios
            .get(`/enrolments/${this.$route.params.id}`, 
            {
                headers: {
                    "Accepted": `application/json`, 
                    "Authorization": `Bearer ${token}`
                }
            })          
            .then(response => {
                console.log(response.data)
                this.enrolments = response.data.data
            })
            .catch(error => console.log(error))
        },
    }
}
</script>

I tried a few different ways to link the courses table to the enrolment one, but nothing worked. But I don't even understand what I have in the first one that allows me to reference the courses table, but not in the second.

CodePudding user response：

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.