Utilisez vue-router pour créer un lien hypertexte avec les données de la table dans l'API
P粉951914381
P粉951914381 2024-03-30 14:06:41
0
1
436

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

P粉951914381
P粉951914381

répondre à tous(1)
P粉957661544

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!