我通过 Axios 来自 API 并使用 Vue 显示的数据未显示 [英] My Data from an API through Axios and displayed with Vue is not showing

查看：23
本文介绍了我通过 Axios 来自 API 并使用 Vue 显示的数据未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<头><title>vue test</title><link href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"rel=样式表"完整性=sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"crossorigin =匿名"><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.2.0/axios.min.js";完整性=sha512-QIsQNDM8hG/1Z3If8Zh2BcpQ79KL3ra1wVMVSliBjQfFMlWMA3tCSe6ZfTK9rw2Ag4hOQ4P5ZhQd4nQl2dMeog=="crossorigin =匿名"referrerpolicy="no-referrer"></script><script src=https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><身体><div class="container mt-4";id="应用程序"><表类=表"><头><tr><th范围=col">#</th><th scope=col">First</th><th scope=col">Last</th><th scope="col">Handle</th></tr></thead><tr v-for=用户中的用户">第 1 个范围＝行"＞第 1 个<td>{{用户名}}</td><td>{{ user.email }}</td><td>{{ user.website }}</td></tr></tbody>

<脚本>var app = new Vue({el: '#app',数据: {用户:[]},安装:功能(){axios.get('https://jsonplaceholder.typicode.com/users').then(响应 => {this.users = response.data;控制台日志(响应)；}).catch(错误=> {控制台日志(错误)；});}})</html>

解决方案

问题是你使用的是非常旧版本的 axios (0.2.0 ...from Sep2014 年 12 月 12 日)

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

var app = new Vue({el: '#app',数据: {用户:[]},安装:功能(){axios.get('https://jsonplaceholder.typicode.com/users').then(响应 => {this.users = response.data}).catch(错误=> {控制台日志(错误)；});}})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="匿名"><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"><头><tr><th scope="col">#</th><th scope="col">First</th><th scope="col">Last</th><th scope="col">句柄</th></tr></thead><tr v-for="user in users"><th scope="row">1</th><td>{{用户名}}</td><td>{{ user.email }}</td><td>{{ user.website }}</td></tr></tbody>

I just started leaning Vue Js, I am trying to fetch some information from an API and display it in a table. I really can't see what the problem is, I have gone through the code thoroughly but can't figure out where the problem is. Below is the code I have written. I am pretty it is something small. Or is there a new way of doing it in the current version of 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>

解决方案

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>

这篇关于我通过 Axios 来自 API 并使用 Vue 显示的数据未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆