recherche

Maison  >  Questions et réponses  >  le corps du texte

Pourquoi mon code API de récupération de Vue.js n'affiche-t-il pas correctement les utilisateurs virtuels ?

<body class="container bg-warning">
    <h1>
        Usuários de Teste via REST
    </h1>
    <p>
        referência ao site reqres.in responsável por fornecer os dados de teste,
        no formato JSON, de forma gratuita
    </p>
    <div id="usuarios" class=" container-fluid">
        <div class="row">
            <div class="card col-3 p-2 m-3" v-for="(user,index) in users" v-bind:key="index">
                <div class=" card-body">
                    <img class="card-img-top" src={{user.avatar}}>
                    </img>
                    <h1>
                        {{user.first_name}} + {{user.last_name}}
                    </h1>
                    <p>
                        {{user.email}}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script>
        const {
            createApp
        } = Vue

        createApp({
            data() {
                return {
                    users: []
                }
            },
            methods: {
                loadUsers() {
                    fetch('https://reqres.in/api/users?per_page=10').then(res =>res.json()).then(data =>users = (data.data));

                }
            },
            mounted() {

                this.loadUsers()
            }
        },
        ).mount('#usuarios')
    </script>
</body>
" // J'ai essayé de changer la méthode loadUsers plusieurs fois et c'est ainsi qu'elle n'obtient pas l'erreur. // Cependant, cela ne fonctionne toujours pas. Le but est d'utiliser fetch pour charger le tableau des utilisateurs à partir des données et d'utiliser l'utilisateur en vue pour afficher les informations sur l'utilisateur

P粉982009874P粉982009874447 Il y a quelques jours632

répondre à tous(1)je répondrai

  • P粉903052556

    P粉9030525562023-09-15 17:20:29

    Dans l'instance du composant, vous devez référencer les données et les méthodes en utilisant this (Pas nécessaire dans la partie HTML car Vue est intelligent !) 

    then(data => this.users = (data.data));

    Assurez-vous d'avoir cette balise de script pour utiliser Vue depuis le CDN (je suppose que vous l'avez déjà, mais ce n'est pas dans votre code !)

    Tout comme l'exemple dans la documentation officielle :

    répondre
    0
  • Annulerrépondre