可以在列表页上从api中的次要表获取变量，但不能在单项页上获取

Question

这个页面从API读取和显示一个完整的表，效果非常好；

<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>

但是，当我试图查看enrolments表中的一个条目时，它无法识别或从courses表中获取该数据，从而产生错误：“TypeError:无法读取未定义的属性（读取'id'）”，这来自第8行：

<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>

我尝试了几种不同的方法将课程表与入学表联系起来，但没有任何效果。但我甚至不明白我在第一个表中有什么可以让我参考课程表，但在第二个表中没有。




Answer 1

我想你可能在第二个组件中拼错了变量，viewEnrolment。你有复数注册：

  this.enrolments = response.data.data

但在组件HTML中，您使用的是单数注册：

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

另外，这只是一个额外的小贴士：在Vue组件中，我通常会尝试调用created（）钩子中的API，而不是mounted（）钩子created（）位于前面，在设置数据观察时调用，但在组件实际装入HTML之前调用。

这可以防止奇怪的问题，当尝试在超文本标记语言中使用this.enrolment时，它实际上还不可用，因为API请求还没有完成。