CODEWITHSUNDEEP
vue.jsaxios
El Hombre Sin Nombre
El Hombre Sin Nombre

Reputation: 3102

Vue - Populate table with Axios

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/[email protected]/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/[email protected]/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>

Upvotes: 2

Views: 7388

Answers (3)

Satyam Pathak
Satyam Pathak

Reputation: 6932

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

Upvotes: 4

kensong
kensong

Reputation: 247

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.

Upvotes: 0

bcjohn
bcjohn

Reputation: 2523

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/[email protected]/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>

Upvotes: 1

Related Questions