為什么 Vue.js/Axios 不渲染我定義的數據？

Question

我使用 Vue.js + Axios 從第三方 API 查詢數據。 數據很好地返回，但它有一些令人困惑的結構（嵌套數組）。

不知何故，Vue 無法正常工作，我沒有看到前端呈現的任何數據。

需要注意的重要事項：

在我運行代碼后，Vue 向前端添加了 20 個 html div（它與包含元素的數量相匹配，但它不顯示相應的數據（見下圖））。

這里可能有什么問題？

Javascript 部分：

var app = new Vue({
    el: '#app_name',
    data: {
      info: []
    },
    mounted() {
      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="app_name">
            <div><p>Team</p></div>
            <div v-for="Rank in info">

            <p>{{ Rank }}</p>

            </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"
                },
                {...}
            ]
        ]
    }
}

在執行 Javascript 之前：

Javascript 執行后：

更新

我嘗試了這個修改（來源： https://github.com/axios/axios/issues/738 ）但我仍然沒有呈現任何數據

  var app = new Vue({
    el: '#app_name',
    data: {
      info: []
    },
    mounted() {
      axios.interceptors.request.use(config => {
        config.paramsSerializer = params => {
          // Qs is already included in the Axios package
          return Qs.stringify(params, {
            arrayFormat: "brackets",
            encode: false
          });
        };
        return config;
      });
      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;
          console.log(response.data.api.standings);
        });
    }

Answer 1

 <div v-for="Rank in info">

 <p>{{ Rank }}</p>

這里的 Rank 是一個 object，如果你的意思是使用你需要的 rank 鍵

<p>{{ Rank.rank }}</p>

Answer 2

這就是你 api 給出的。 我認為，因為一個演示版。
沒有可顯示的項目。 所以 Vue 不顯示任何東西。 這是服務器的問題，而不是您的代碼。
我很擔心，但也許你需要另一個 api:(