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
