可以從串列頁面上的api中的輔助表中獲取變數，但不能在單個專案頁面上獲取

此頁面從 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：無法讀取未定義的屬性（讀取 '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>

我嘗試了幾種不同的方法將課程表鏈接到注冊表，但沒有任何效果。但我什至不明白我在第一個允許我參考課程表的內容，而不是在第二個。

uj5u.com熱心網友回復：

我認為您可能在第二個組件中拼錯了變數viewEnrolment. 你有復數注冊：

  this.enrolments = response.data.data

但是在您的組件 HTML 中，您使用的是單數注冊：

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

此外，這只是一個額外的花絮：在 Vue 組件中，我通常會嘗試在created() hook 中呼叫 API ，而不是在mounted()hook 中。created()出現在之前，并在設定資料觀察時呼叫，但在組件實際安裝到 HTML 之前。

這可以防止出現奇怪的問題，即在嘗試this.enrolment在 HTML 中使用時，它實際上尚未可用，因為 API 請求尚未完成。

標籤：javascript 接口 Vue.js 引导-vue

上一篇：如何在Vue中使數字輸入上的箭頭鍵變得懶惰？

下一篇：如何異步處理Stream事件并等待所有異步處理在dart中完成？