<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>
”
//我尝试了多次更改loadUsers方法，这是不会出现错误的方式。
//然而，仍然无法正常工作。目标是使用fetch从数据中加载users数组，并在vue中使用user显示用户信息
在组件实例内部，您需要使用
this引用数据和方法 （在HTML部分不需要，因为Vue很聪明！）确保您有这个脚本标签以从CDN中使用Vue（我假设您已经有了，但它不在您的代码中！）
就像官方文档中的示例一样：