javascriptvue.jsdomfrontendvuejs3

vue data isn`t displayed on a page


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


Solution

  • 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>