Utilisez vue-router pour créer un lien hypertexte avec les données de la table dans l'API

Question

Je récupère et affiche des données à partir d'une API (https://restcountries.com/) mais je ne peux pas créer de lien hypertexte entre chaque entrée de table et sa propre page à l'aide de la balise router-link. Rien ne se passe, aucune erreur, aucun texte de lien.

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

Si je supprime .common de la clé "nom", le lien du routeur fonctionne, mais il affichera toutes les variantes du nom du pays, pas seulement le nom "commun" que je veux. De plus, si vous supprimez .common, le lien du routeur ne fonctionnera pas comme indiqué ci-dessous :

"TypeError : Impossible de lire la propriété (lire 'nom') de non défini" "La propriété ou la méthode 'pays' n'est pas définie sur l'instance et est référencée lors du rendu

."

Bien que je n'obtienne pas ces erreurs ailleurs avec ce lien de routeur exact et que le "nom" ne soit pas défini dans ces fichiers), la seule façon d'obtenir le lien vers le lien du routeur est avec ces paramètres : { id: data.item._id } (même si ce n'est pas le cas) ne crée aucun lien vers un contenu (il essaie de créer un lien vers '/undefined?fullText=true'))

Answer 1

Les paramètres de la liaison du routeur doivent être params: {country: data.item.name.official }}