<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尝试多次更改loadUsers方法。这是不显示错误的方法。//但是仍然不起作用。目标是用来自提取的数据加载阵列用户。并在vue中使用user来显示来自用户的信息
1条答案
按热度按时间w6lpcovy1#
在组件示例内部，您需要使用
this引用数据和方法（在HTML部分不需要，因为Vue很聪明！）确保你有这个脚本标签来从CDN使用Vue（我假设你有它，但它不在你的代码中！）
就像官方文档中的例子：