我通过 Axios 来自 API 并使用 Vue 显示的数据未显示 [英] My Data from an API through Axios and displayed with Vue is not showing
问题描述
我刚开始学习 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天全站免登陆