可以从列表页面上的 api 中的辅助 table 获取变量，但不能在单个项目页面上获取变量

Question

此页面从 API 读取和显示完整的 table 完美无缺；

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

但是，当我尝试只查看一个注册条目 table 时，它无法识别或从课程 table 中获取该数据，并出现错误： “TypeError: Cannot read properties of undefined (reading 'id')”，来自第 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>

我尝试了几种不同的方法来 link 课程 table 到注册课程，但没有任何效果。但我什至不明白我在第一个允许我参考课程的内容 table，但在第二个中没有。

Answer 1

我认为您可能在第二个组件 viewEnrolment 中拼错了变量。你有复数 enrollments:

  this.enrolments = response.data.data

但是在您的组件 HTML 中，您使用的是单数 enrollment:

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

此外，这只是一个额外的花絮：在 Vue 组件中，我通常会尝试在 created() hook 中调用 API，而不是 mounted() 钩。 created()在前面，在设置数据观察时被调用，但是在之前组件实际挂载到HTML.

这可以防止在 HTML 中尝试使用 this.enrolment 时出现奇怪的问题，因为 API 请求尚未完成，它实际上还不可用。

可以从列表页面上的 api 中的辅助 table 获取变量，但不能在单个项目页面上获取变量

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

javascript

api

vue.js

bootstrap-vue