Fetch all users and display them with vue js

Question

I am very new to Vue js and I am now trying to output all the users in a table by fetching them with an ajax call. I get the users with no issue but then when I try to set the data.user with the new data I get an error saying the property or method users is not defined. This is my user list components:

<template>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">List of users</div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                          <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="user in users">
                            <td>user.name</td>
                            <td>user.lastaname</td>
                            <td>user.email</td>
                          </tr>
                      </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</template>


<script>
export default {

    data: function () {
        return {
          users: []
        }
    },

    mounted() {
        axios.get('/users')
            .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error.message);
        });
    },

}
</script>

Giesburts · Accepted Answer · 2017-11-04 14:25:34Z

4

Try this

<script>
export default {

    data: function () {
        return {
          users: []
        }
    },

    methods: {

      getUsers: function() {

        var app = this;

         axios.get('/users')
            .then(function (response) {
            app.users = response.data;
        })
        .catch(function (error) {
            console.log(error.message);
        });

      }

    },

    created() {
      this.getUsers();
    },

    }

ES6 Syntax

  getUsers() {

     axios.get('/users')
      .then((response) => this.users = response.data)
      .catch((error) => console.log(error.message))

  }

answered Nov 4, 2017 at 14:25

Giesburts

7,83617 gold badges53 silver badges92 bronze badges

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

Collectives™ on Stack Overflow

Fetch all users and display them with vue js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related