Gunakan vue-router untuk memaut data jadual dalam API

Question

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 saya tidak mendapat ralat ini dengan pautan penghala tepat ini di tempat lain, dan "nama" tidak ditakrifkan dalam fail ini), satu-satunya cara saya mendapatkan pautan ke pautan penghala adalah dengan parameter ini:

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

Answer 1

Parameter pautan penghala hendaklah params: {country: data.item.name.official }}