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

Posted 2023-02-22

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

【英文标题】：Can get variable from secondary table in api on a list page, but not on single item page

【发布时间】：2022-01-14 10:15:57

【问题描述】：

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

但是，当我尝试仅查看注册表中的一个条目时，它无法识别或从课程表中获取该数据，从而出现错误： “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>

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

【参考方案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 请求尚未完成，它实际上还不可用。

【讨论】：

就是这样，一个愚蠢的错误，谢谢。