使用 vue-router 超链接来自 API 的 table 数据

Question

我正在接收并显示来自 API (https://restcountries.com/) 的数据，但我无法超linking 其每个 table 条目带有 router-link 标签的自己的页面。没有任何反应，没有错误，没有 linked 文本。

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

如果我从键 'name' 中删除 .common，router-link 可以工作，但它会显示国家名称的所有变体，而不仅仅是一个 'common' 名称我想要的。此外，如果删除 .common，router-link 将无法正常工作，如此处所示，我会收到以下错误：

“类型错误：无法读取未定义的属性（读取 'name'）” “属性或方法“国家/地区”未在实例上定义，但在渲染期间被引用。”

虽然我在其他地方没有用这个确切的路由器得到这些错误-link，并且 'name' 没有在那些文件中定义），但我得到路由器的唯一方法- link 到 link 与这些参数有关：{ id: data.item._id }（虽然它 link 什么都没有（它试图 link 到 '/undefined?fullText=true' ))

Answer 1

router-link 的参数应该是 params: { country: data.item.name.official }}

使用 vue-router 超链接来自 API 的 table 数据

Hyperlinking table data from API with vue-router

html

javascript

vue.js

bootstrap-vue