WallyJ
5 months ago
265
15
Vue

Data shows in Console, but not in the View

Posted 5 months ago by WallyJ

Simple query via

<template>
<div>Clients
<table>
    <tr v-for="user in users" v-bind:key="user.id">
        <td>{{user.name}}</td>
    </tr>
</table>
</div>
</template>

<script>
    export default {
        data() {
            return {
                users : {}
            }
        },
        methods: {
            loadUsers() {
                axios.get("api/user").then(({ data }) => (this.users = data.data));
            }
        },

        created() {
            this.loadUsers();
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

When I load the view I get no errors on page or in the console. I can see the user array in the Network tab, click on it and choose "Preview" to see the first record of data, so I know the query is working.

But the data doesn't show on the page.

I look at the elements on the page and see:

<table></table>

The table opens and closes with nothing in it.

For some reason the v-for is not loading the data, but it isn't producing a visible error either.

What am I missing? Thanks!

Please sign in or create an account to participate in this conversation.