Ich erhalte und zeige Daten von einer API (https://restcountries.com/), aber ich kann nicht jeden Tabelleneintrag mithilfe des Router-Link-Tags mit einer eigenen Seite verknüpfen. Nichts passiert, keine Fehler, kein Linktext.

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

Wenn ich .common aus dem Schlüssel „Name“ entferne, funktioniert Router-Link, zeigt aber alle Variationen des Ländernamens an, nicht nur den einen „gemeinsamen“ Namen, den ich möchte. Wenn Sie .common entfernen, funktioniert der Router-Link außerdem nicht wie unten gezeigt:

„TypeError: Eigenschaft von undefiniert kann nicht gelesen werden (‚Name‘ lesen)“ „Die Eigenschaft oder Methode ‚Land‘ ist in der Instanz nicht definiert und wird beim Rendern referenziert.“

(obwohl dies nicht der Fall ist) Es wird kein Link zu Inhalten erstellt (es wird versucht, auf „/undefiniert?fullText=true“ zu verlinken)) { id: data.item._id }