我通过 Axios 来自 API 并使用 Vue 显示的数据未显示答案

【问题标题】：My Data from an API through Axios and displayed with Vue is not showing我通过 Axios 来自 API 并使用 Vue 显示的数据未显示
【发布时间】：2021-08-16 13:52:05
【问题描述】：

我刚开始学习 Vue Js，我正在尝试从 API 获取一些信息并将其显示在表格中。我真的看不出问题出在哪里，我已经彻底检查了代码，但无法弄清楚问题出在哪里。下面是我写的代码。我很漂亮它是小东西。或者在当前版本的 Vue 中是否有新的方法？

<!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.2.0/axios.min.js" integrity="sha512-QIsQNDM8hG/1Z3If8Zh2BcpQ79KL3ra1wVMVSliBjQfFMlWMA3tCSe6ZfTK9rw2Ag4hOQ4P5ZhQd4nQl2dMeog==" crossorigin="anonymous" referrerpolicy="no-referrer"></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>

【问题讨论】：

标签： twitter-bootstrap api vue.js axios

【解决方案1】：

问题是您使用的是非常旧版本的 axios（0.2.0 ...from Sep 12, 2014）

如果您更新到当前版本，它可以工作...

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>

【讨论】：

【解决方案2】：

您导入了really old version of axios (0.2.0)。当前版本为0.21.1，将数据移入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>

【讨论】：