[英]Why does Vue.js/Axios don't render the data I defined?
I query data from a third party API using Vue.js + Axios.我使用 Vue.js + Axios 从第三方 API 查询数据。 The data is returned nicely however it has a bit of confusing structure (nested array).
数据很好地返回,但它有一些令人困惑的结构(嵌套数组)。
Somehow the Vue doesn't properly work and I don't see any data renderedat the frontend.不知何故,Vue 无法正常工作,我没有看到前端呈现的任何数据。
Important to note:需要注意的重要事项:
The Vue adds exactly 20 html divs to the frontend after I run the code (which matchs the number of containing elements, but it doesn't display the according data(see images below)).在我运行代码后,Vue 向前端添加了 20 个 html div(它与包含元素的数量相匹配,但它不显示相应的数据(见下图))。
What might be an issue here?这里可能有什么问题?
Javascript part : Javascript 部分:
var app = new Vue({
el: '#app_name',
data: {
info: []
},
mounted() {
axios
.get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)
.then(response => {
this.info = response.data.api.standings[0];
console.log(response.data.api.standings[0]);
});
}
HTML part: HTML 部分:
<div class="table" id="app_name">
<div><p>Team</p></div>
<div v-for="Rank in info">
<p>{{ Rank }}</p>
</div>
This is the JSON return, note the nested array:这是 JSON 返回,注意嵌套数组:
{
"api": {
"results": 1,
"standings": [
[
{
"rank": 1,
"team_id": 85,
"teamName": "Paris Saint Germain",
"logo": "https://media.api-football.com/teams/85.png",
"group": "Ligue 1",
"forme": "DLWLL",
"description": "Promotion - Champions League (Group Stage)",
"all": {
"matchsPlayed": 35,
"win": 27,
"draw": 4,
"lose": 4,
"goalsFor": 98,
"goalsAgainst": 31
},
"home": {
"matchsPlayed": 18,
"win": 16,
"draw": 2,
"lose": 0,
"goalsFor": 59,
"goalsAgainst": 10
},
"away": {
"matchsPlayed": 17,
"win": 11,
"draw": 2,
"lose": 4,
"goalsFor": 39,
"goalsAgainst": 21
},
"goalsDiff": 67,
"points": 85,
"lastUpdate": "2019-05-04"
},
{...}
]
]
}
}
Before Javascript is executed:在执行 Javascript 之前:
After Javascript is executed: Javascript 执行后:
UPDATE更新
I tried it with this modification (source: https://github.com/axios/axios/issues/738 ) but still I don't have any data rendered我尝试了这个修改(来源: https://github.com/axios/axios/issues/738 )但我仍然没有呈现任何数据
var app = new Vue({
el: '#app_name',
data: {
info: []
},
mounted() {
axios.interceptors.request.use(config => {
config.paramsSerializer = params => {
// Qs is already included in the Axios package
return Qs.stringify(params, {
arrayFormat: "brackets",
encode: false
});
};
return config;
});
axios
.get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)
.then(response => {
this.info = response.data.api.standings;
console.log(response.data.api.standings);
});
}
<div v-for="Rank in info">
<p>{{ Rank }}</p>
Here Rank is an object, if you mean to use the rank key you need to这里的 Rank 是一个 object,如果你的意思是使用你需要的 rank 键
<p>{{ Rank.rank }}</p>
This is what you api gives.这就是你 api 给出的。 I think, because of a demo version.
我认为,因为一个演示版。
There are no items to display.没有可显示的项目。 So Vue not displays anything.
所以 Vue 不显示任何东西。 It's a problem with the server, not your code.
这是服务器的问题,而不是您的代码。
I'm worried, but maybe you need another api:(我很担心,但也许你需要另一个 api:(
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.