Заполните DOM, используя Vue.JS / Axios и данные стороннего API (на основе Django!)

Question

Я хотел бы использовать Vue.js для заполнения DOM извлеченными данными из стороннего API (при этом я не имею контроля над API). Функция Vue вызывает и возвращает необходимые данные, а также создает правильное количество HTML-дивов. Но проблема в том, что данные не отправляются в эти контейнеры html / p.

Примечание: Данные API (JSON) немного сбивают с толку, так как это своего рода массив. структура в массиве (я уже говорил с провайдером, и у них есть веская причина структурировать эту конечную точку как есть). Однако он возвращает данные очень хорошо.

Аналогичная проблема, которая еще не решена:

Данные Vuejs Axios не показывают

Теперь я действительно не знаю, как действовать.

Это моя функция 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 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>