搜索

首页  >  问答  >  正文

使用vue-router将API中的表格数据进行超链接化

我正在从 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'))

P粉951914381P粉951914381234 天前490

全部回复(1)我来回复

  • P粉957661544

    P粉9576615442024-03-31 10:35:16

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

    回复
    0
  • 取消回复