<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>
"
//I tried changing the loadUsers method multiple times and this is the way it doesn't get the error.
//However, still doesn't work. The goal is to use fetch to load the users array from the data and use user to display user information in vue
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Inside the component instance you need to reference the data and methods using
this(Not needed in the HTML part, because Vue is smart!)Make sure you have this script tag to use Vue from the CDN (I'm assuming you already have it, but it's not in your code!)
Just like the example in the official documentation: