我想使用Vue.js从第三方API中提取数据填充DOM(也就是说,我无法控制该API)。 Vue函数调用并返回所需的数据,并且还会创建正确数量的html div。但是问题是没有数据转发到这些html / p容器。
注意: API数据(JSON)有点令人困惑,因为它是某种数组数组结构(我已经与提供程序进行过交谈,他们有很好的理由来构造此端点是)。但是它返回数据就很好。
尚未解决的类似问题:
现在我真的不知道如何进行。
这是我的Vue.js函数:
var app = new Vue({
el: '#Rank',
data: {
info: []
},
created() {
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="Rank">
<div><p>Rank</p></div>
<div v-for="rank in info" class="rank"><p>{{ standings.rank }}</p></div>
</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"
},
[...]
}
]
]
}
}
和v-for
输出,它创建正确数量的html div,但是没有任何数据。.:
这是来自Vue开发工具的信息:
您在v-for中使用了错误的键rank in info
,如果要使用standings
,则将其重命名为standings.rank
<div class="table" id="Rank">
<div><p>Rank</p></div>
<div v-for="standings in info" class="rank"><p>{{ standings.rank }}</p></div>
</div>
更新
created() {
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('updated info', response.data.api.standings[0]); // can you share the value here ?
});
}
编辑:下面的代码工作正常,您的问题应该在其他地方。
这终于对我有用:
将Delimiters从大括号更改为其他任何内容,因此Django也没有腐蚀,该变量也将大括号用作变量。
根据最初问题的有效解决方案:
JS:
var app = new Vue({
delimiters : ['[[',']]'],
el: '#Rank',
data: {
info: []
},
created() {
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 id="app">
<div class="table" id="Rank">
<div><p>Rank</p></div>
<div v-for="standings in info" class="rank"><p>[[ standings.rank ]]</p></div>
</div></div>