The functionality of this page, which reads and displays a full table from an API, is working flawlessly;
<template>
<b-col>
<h2>
Enrolments
<b-button :to="{ name: 'createEnrolment', params: { id: this.$route.params}}" variant="warning" class="float-right">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 attempting to view a single entry from the enrolments table, it encounters difficulty in accessing data from the courses table, resulting in the error: "TypeError: Cannot read properties of undefined (reading 'id')", which is stemming 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>
Various attempts to link the courses table to the enrolment table have been made, all to no avail. The disparity in referencing the courses table between the two instances is perplexing to me.