Vue - Populate table with Axios

user_4827274 0
Viewed 6287

Im trying to populate table with axios and vue, like this:

    <div class="container  h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <table class="table table-striped table-bordered table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>#</th>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users">
                        <td>{{user.name}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.phone}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var users;
    axios.get('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
            users = response['data'];
        })
        .catch(function (error) {
            console.log(error);
        })
</script>

The problem is that {{user.name}} returns '{{user.name}}' , doesn´t show real data. Anybody know how can I use vue to show array data in a table?

UPDATE

I updated with this code but view still empty. If i return this.users in the script return a object with values.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <title>Tabla</title>
        <style>
            body,
            html {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="tabla">
            <div class="container  h-100">
                <div class="row h-100 justify-content-center align-items-center">
                    <table class="table table-striped table-bordered table-hover text-center">
                        <thead class="thead-dark">
                            <tr>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Email</th>
                                <th>Phone</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="user in users">
                                <td>{{user.name}}</td>
                                <td>{{user.username}}</td>
                                <td>{{user.email}}</td>
                                <td>{{user.phone}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#tabla',
            data: {
                users: [],
            },
            created: function () {
                this.load();
            },
            methods: {
                load: function () {
                    axios
                        .get('https://jsonplaceholder.typicode.com/users')
                        .then(function (response) {
                            this.users = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            }
        })
    </script>

</html>
axios vue.js
3 Answers

Update

Issue is with this inside your axios api callback.

This is not the right place to explain this very explanatory.

In simple context - this is the object that the function is the property of. And In your case this get window object as you are using function which is not lexically scoped. To make it lexically scoped Use ES6 Arrow fn

new Vue({
  el: "#app",
  data() {
    return {
        users: []
    }
  },
  mounted: function() {
      axios
        .get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.data
        })
        .catch(function (error) {
          console.log(error);
        })
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">

  <table>
      <thead class="thead-dark">
                    <tr>
                        <th>#</th>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users" :key="user.email">
                        <td>{{user.name}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.phone}}</td>
                    </tr>
                </tbody>
  </table>
</div>

You need to create vue instance which binds your html to it.

Let say you have html which has a id = app

<div id="app">
  {{ message }}
</div>

Now if you want this piece of html to use vue, you need to bind it.

var app = new Vue({
  el: '#app', // This property el binds the container #app
  data: {
    message: 'Hello Vue!' // here you create your data values you want to use
  }
})

However I would suggest you to look through vue awesome documentation before using it - Vue JS

user_73583080

You don't define users in a vue instance. You should create a vue instance and define users in the data part.

<body>
  <div id="app">
    // Paste all of your html in here
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      users: []
    },
    mounted: function() {
      axios
        .get('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
          this.users = response['data'];
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  })
</script>
user_100909270

Have you properly initiated Vue ?

Take a look at this official documentation. https://v2.vuejs.org/v2/guide/index.html

If you have initiated the Vue in other file and this is only component definition, you should still need to follow the component definition. And call the Axios inside mount lifecycle and define users as data or computed.

user_116507120
Related