我正在從 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'))
路由器連結的參數應該是
params: {country: data.item.name.official }}