While developing my application with vue.js, I encountered an issue where the data was not being output as expected. Strangely enough, when I logged the data to the console using console.log(), everything appeared correctly without any errors in the console.
Here is the HTML part of the code:
<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>
And here is the 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 attempted to debug this issue by converting the code into two different versions of vue, but unfortunately, the problem persisted. Even seeking help from a chat GPT did not provide a solution for me.