I started writing the front part of my application using vue.js . And I have a problem with the fact that the data is not output, although if I output it to the console via console.log, everything is displayed correctly. There are no errors in the console.
html part:
<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 part:
<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>
I tried to rewrite this code on 2 versions of vue, but I ran into the same problem. I also tried to fix the code using chat gpt but it didn't help me
Your code works with fake users request:
<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>