<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>
"
//Ich habe mehrmals versucht, die Methode „loadUsers“ zu ändern, aber auf diese Weise wird der Fehler nicht angezeigt.
// Funktioniert jedoch immer noch nicht. Das Ziel besteht darin, mit fetch das Benutzerarray aus Daten zu laden und mit user in vue Benutzerinformationen anzuzeigen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
在组件实例内部，您需要使用
this引用数据和方法 （在HTML部分不需要，因为Vue很聪明！）确保您有这个脚本标签以从CDN中使用Vue（我假设您已经有了，但它不在您的代码中！）
就像官方文档中的示例一样：