Saya mendapat dan memaparkan data daripada API (https://restcountries.com/) tetapi saya tidak boleh memautkan setiap entri jadual ke halamannya sendiri menggunakan teg pautan penghala. Tiada apa-apa yang berlaku, tiada ralat, tiada teks pautan.

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

Jika saya mengalih keluar .common daripada kekunci "nama", pautan penghala berfungsi, tetapi ia akan menunjukkan semua variasi nama negara, bukan hanya satu nama "biasa" yang saya mahukan. Selain itu, jika anda mengalih keluar .common, pautan penghala tidak akan berfungsi seperti yang ditunjukkan di bawah:

"TypeError: Tidak dapat membaca sifat yang tidak ditentukan (baca 'nama')" "Negara" harta atau kaedah tidak ditakrifkan pada contoh dan dirujuk semasa pemaparan."

(walaupun ia ' t memaut ke mana-mana kandungan (ia cuba memaut ke '/undefined?fullText=true')) { id: data.item._id }