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

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

Answer 2

这最终对我有用：

将分隔符从大括号更改为其他任何内容，因此 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>