使用vue-router將API中的表格資料進行超連結化

Question

我正在從 API (https://restcountries.com/) 獲取並顯示數據，但我無法使用 router-link 標記將每個表條目超連結到自己的頁面。什麼也沒發生，沒有錯誤，沒有連結文字。

<template>
    <div>
        <b-table responsive head-variant="dark" striped hover :items="countries" :fields="headings">
            <template #cell(name)="data">
                <router-link :to="{name: 'country', params: {country: country.name.official}}">
                    {{ data.value }}
                </router-link>
            </template>
        </b-table>
    </div>
</template>

<script>
import axios from '@/config'

export default {
    name: 'AllCountries',
    components: {},
    data() {
        return {
            headings: [
                {
                    key: 'name.common',
                    sortable: true
                },
                {
                    key: 'capital',
                    sortable: true
                },
            ],
            countries: []
        }
    },
    mounted() {
        axios.get('/all')
        .then(response => {
            console.log(response.data)
            this.countries = response.data
        })
        .catch(error => console.log(error))
    }
}
</script>

如果我從鍵“名稱”中刪除 .common，router-link 可以工作，但它將顯示國家/地區名稱的所有變體，而不僅僅是我想要的一個“通用”名稱。此外，如果刪除 .common，路由器連結將無法運作，如下所示：

“類型錯誤：無法讀取未定義的屬性（讀取“名稱”）” 「屬性或方法「國家」未在實例上定義，而是在渲染期間引用。」

雖然我在其他地方沒有使用這個確切的路由器連結得到這些錯誤，並且這些文件中沒有定義「名稱」），但我獲得路由器連結連結的唯一方法是使用這些參數： { id: data.item._id }（儘管它沒有連結到任何內容（它嘗試連結到'/undefined?fullText=true'））

Answer 1

路由器連結的參數應該是 params: {country: data.item.name.official }}