[Vuejs]-My Data from an API through Axios and displayed with Vue is not showing

by

1đź‘Ť

âś…

Problem is you are using very old version of axios (0.2.0 …from Sep 12, 2014)

If you update to current verison, it works…

var app = new Vue({
  el: '#app',
  data: {
    users: []
  },
  mounted: function() {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error);
      });
  }

})
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div class="container mt-4" id="app">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users">
        <th scope="row">1</th>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.website }}</td>
      </tr>
    </tbody>
  </table>
</div>

1đź‘Ť

You imported a really old version of axios (0.2.0). The current version is 0.21.1, which moves the data into response.data:

// v0.2.0
axios.get(...).then(response => {
  /* response is the data */
  console.log('data', response)
})

// v0.21.1
axios.get(...).then(response => {
 /* response.data is the data */
 console.log('data', response.data)
})

<!-- ❌ old -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.2.0/axios.min.js"></script>

<!-- âś… current -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <title>vue test</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div class="container mt-4" id="app">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users">
          <th scope="row">1</th>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.website }}</td>
        </tr>

      </tbody>
    </table>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        users: []
      },
      mounted: function() {
        axios.get('https://jsonplaceholder.typicode.com/users')
          .then(response => {
            this.users = response.data;
            console.log(response);
          })
          .catch(error => {
            console.log(error);
          });
      }

    })
  </script>

</body>

</html>

Leave a comment