我开始使用 vue.js 编写应用程序的前部。我有一个问题，即数据没有输出，尽管如果我通过 console.log 将其输出到控制台，所有内容都会正确显示。控制台没有错误。
html部分：
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Registration time</th>
</tr>
</thead>
<tbody>
<!-- v-if="users.length > 0">-->
<tr v-for="user in users" :key="user.id">
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.inputTime}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
脚本部分：
<script>
const app = Vue.createApp({
data() {
return {
users: []
}
},
async created() {
try {
const response = await fetch('http://localhost:8080/api/v1/users/')
const data = await response.json()
console.log(data)
this.users = data
} catch (error) {
console.log(error);
}
}
})
app.mount('#app')
</script>
我尝试在 2 个版本的 vue 上重写这段代码，但遇到了同样的问题。我还尝试使用聊天 gpt 修复代码，但它对我没有帮助
请提供最少的、可重现的示例。不管怎样，你的代码可以满足虚假用户的请求：
<html>
<head>
<title>Users</title>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Registration time</th>
</tr>
</thead>
<tbody>
<!-- v-if="users.length > 0">-->
<tr v-for="user in users" :key="user.id">
<td>{{user.name}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
users: []
}
},
async created() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users')
const data = await response.json()
console.log(data)
this.users = data
} catch (error) {
console.log(error);
}
}
})
app.mount('#app')
</script>
</body>
</html>