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

【问题标题】：Populate DOM using Vue.JS/Axios and data from a third party API (Django based!)使用 Vue.JS/Axios 和来自第三方 API（基于 Django！）的数据填充 DOM
【发布时间】：2020-02-09 21:57:19
【问题描述】：

我想使用 Vue.js 用从第三方 API 获取的数据填充 DOM（也就是说我无法控制 API）。 Vue 函数调用并返回所需的数据，它还创建正确数量的 html div。但问题是没有数据转发到那些 html/p 容器。

注意： API 数据 (JSON) 有点令人困惑，因为它是某种数组中的数组结构（我已经与提供者谈过，他们有充分的理由来构建这个端点原样）。但是它返回数据就好了。

尚未解决的类似问题：

Vuejs Axios data not showing

现在我真的不知道该怎么做。

这是我的 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 开发工具的信息：

【问题讨论】：

这看起来与您之前提出的问题非常相似。 stackoverflow.com/questions/58249476/…你说div里面没有数据，但是你发的图片中没有展开任何div。
@skirtle 感谢您的帖子。我将替换图像，但只有空的
元素。我过去也有类似的问题，是的。如果解决方法一样，我可以再删一次。
@Phanti 我这里已经解决了，查看答案

标签： javascript vue.js axios

【解决方案1】：

您在 v-for 中使用了错误的键 rank in info，如果您要使用 standings.rank，请将其重命名为 standings

 <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 ?
                });
            }

编辑： 下面的代码运行良好，您的问题应该在其他地方。

https://jsfiddle.net/59Lnbk17/1/

【讨论】：

谢谢。我用你的建议代替了它，但仍然没有数据。我猜这是由于“双数组”结构造成的？
Phanti，能分享一下api json的实际结构吗？
更多示例
这是 json url：api-football.com/demo/api/v2/leagueTable/2 您可以使用 jsonlint.com 对其进行 lint（您可能知道，哈哈），如果我应该在我的初始帖子中发布整个回调，请告诉我。谢谢
你能检查更新并分享response.data.api.standings[0]中的值吗？如果您将 this.info 设置为该值，那么嵌套结构应该没有问题，因为 info 将是一个简单的数组

【解决方案2】：

这最终对我有用：

将 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>

【讨论】：