我使用Vue.js + Axios从第三方API查询数据。数据返回很好,但是它具有一些混乱的结构(嵌套数组)。
由于某种原因,Vue无法正常工作,并且前端看不到任何数据。
重要说明:
在我运行代码后,Vue将恰好在前端添加了20个html div(与包含元素的数量匹配,但不显示相应的数据(请参见下图))。
这里可能有什么问题?
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部分:
<div class="table" id="app_name">
<div><p>Team</p></div>
<div v-for="Rank in info">
<p>{{ Rank }}</p>
</div>
这是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"
},
{...}
]
]
}
}
在执行Javascript之前:
执行Javascript之后:
更新
我尝试了此修改(来源: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>
这里的排名是一个对象,如果您要使用排名键,则需要
<p>{{ Rank.rank }}</p>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句