使用 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 被删除，路由器链接将无法正常工作，如此处所示，我会收到以下错误：

“TypeError：无法读取未定义的属性（读取'名称'）” “属性或方法“国家”未在实例上定义，但在渲染期间被引用。”

虽然我没有在其他地方使用这个确切的路由器链接得到这些错误，并且这些文件中没有定义“名称”），但我让路由器链接链接的唯一方法是使用这些参数： { id: data.item._id }（虽然它什么都没有链接（它试图链接到'/undefined?fullText=true'））

Answer 1

路由器链接的参数应该是params: { country: data.item.name.official }}