<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（我假設您已經有了，但它不在您的程式碼中！）
就像官方文件中的範例一樣：