unable to print array to table via vuejs

Question

could anyone pls tell me why this table isn't printing the result? it appears that axios is pulling the data ok and printing to console.log, but the view is not outputting in the table.

<table id="app">
    <tbody>
        <tr v-for="user in users">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.phone }}</td>
        </tr>
    </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            users: []
        },
        methods: {
            getAllUsers: function(){
                axios.get("http://example.net/users/process.php?action=read").then(function(response){
                    if(response.data.error){
                        app.errorMsg = response.data.message;
                    }
                    else{
                        app.users = response.data.users;
                        console.log(app.users);
                    }
                });
            }
        },
        mounted(){
            this.getAllUsers();
        }
    })
</script>

thx so much guys for your time!

Are you defining app anywhere? If not then app will just be referring to the element with the id app, which is not what you want. I suggest using an arrow function for the then callback so that you can use this.users instead. — skirtle
– skirtle, Commented Jan 5, 2020 at 5:16

artificialpixel · Accepted Answer · 2020-01-05 05:29:54Z

2

wow you guys are fast! @skirtle thank you ! i made the modification by using the arrow and then using this.users and it worked!

                getAllUsers: function(){
                    axios.get("http://example.net/users/process.php?action=read").then(response => {
                        if(response.data.error){
                            this.errorMsg = response.data.message;
                        }
                        else{
                            this.users = response.data.users;
                            console.log(this.users);
                        }
                    });
                }

answered Jan 5, 2020 at 5:29

artificialpixel

415 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

unable to print array to table via vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related