使用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 }}