使用 Vue.JS/Axios 和来自第三方 API（基于 Django！）的数据填充 DOM

Question

我想使用 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

                    },

和v-for输出，它创建了正确数量的 html div，但没有任何数据..：

这是来自 Vue dev-tools 的信息：

Answer 1

您rank in info在 v-for 中使用了错误的键，standings如果您要使用，请将其重命名为standings.rank&nbsp;<div class="table" id="Rank">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><p>Rank</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div v-for="standings in info" class="rank"><p>{{ standings.rank }}</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>更新created() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.info = response.data.api.standings[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('updated info', response.data.api.standings[0]); // can you share the value here ?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }编辑： 代码在下面工作正常，您的问题应该在其他地方。https://jsfiddle.net/59Lnbk17/1/

Answer 2

这最终对我有用：将分隔符从大括号更改为其他任何内容，因此 Django 也不会腐蚀它，因为它的变量也使用大括号。根据初始问题工作的解决方案：JS：&nbsp; var app = new Vue({&nbsp; &nbsp; delimiters : ['[[',']]'],&nbsp; &nbsp; el: '#Rank',&nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; info: []&nbsp; &nbsp; },&nbsp; &nbsp; created() {&nbsp; &nbsp; &nbsp; axios&nbsp; &nbsp; &nbsp; &nbsp; .get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)&nbsp; &nbsp; &nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.info = response.data.api.standings[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(response.data.api.standings[0]);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; });HTML：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="app">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="table" id="Rank">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><p>Rank</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div v-for="standings in info" class="rank"><p>[[ standings.rank ]]</p></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div></div>