<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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 !)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 :