Verwenden Sie Vue-Router, um Tabellendaten in der API zu verlinken

Question

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

Während ich diese Fehler bei diesem genauen Router-Link anderswo nicht erhalte und „Name“ in diesen Dateien nicht definiert ist, kann ich den Link zum Router-Link nur mit diesen Parametern erhalten:

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

Answer 1

路由器链接的参数应该是 params: {country: data.item.name.official }}