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