Javascript 为什么Vue.js/Axios不'；不呈现我定义的数据？

我使用Vue.js+Axios从第三方API查询数据。数据返回得很好，但是它的结构有点混乱（嵌套数组）

由于某种原因，Vue无法正常工作，我在前端看不到任何呈现的数据

需要注意的重要事项：

          <div class="table" id="app_name">
            <div><p>Team</p></div>
            <div v-for="Rank in info">

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

            </div>

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

在我运行代码后，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>

{
    "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之前：

          <div class="table" id="app_name">
            <div><p>Team</p></div>
            <div v-for="Rank in info">

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

            </div>

{
    "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后：

          <div class="table" id="app_name">
            <div><p>Team</p></div>
            <div v-for="Rank in info">

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

            </div>

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

更新

我尝试了这个修改（来源：），但仍然没有任何数据呈现

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

{{Rank}}

这里Rank是一个对象，如果您想使用您需要的Rank键

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

{{Rank.Rank}

这就是api所提供的。我想是因为演示版。
没有要显示的项目。所以Vue不显示任何内容。这是服务器的问题，而不是您的代码。

---

我很担心，但可能您需要另一个api:（

不要在mounted（）中调用api，请在created（）中尝试）甚至在此之前，请确保您在装载之前拥有所有数据。尝试了它，没有任何更改。然后在装载中插入什么？@Phanti

创建的

钩子非常适合获取数据。尝试在迭代

上放置一个

v-if

。这也是

{Rank}

将是整个对象，您希望从中访问什么？我有11个对象要获取，但如果其中一个可行，我可以找到其他对象。我尝试了您的代码，但仍然得到没有任何渲染数据的空html容器。Vue只是创建容器。问题是如何引用数组中的元素，因为它是nested不知何故..这个API可能需要很长时间才能完成，到那时，created（）和mounted（）已经运行了。Make

v-if=“info.length”

，如果它为0，则显示加载，如果它有长度，则显示循环。另外，尝试不分配到数组中，如果您为数组分配新值，Vue无法检测数组的变化。请使用推送或其他方法。请参阅我的初始帖子。我从API中获得整个英超als联赛表作为响应（英超联赛在演示中是免费的）.我有一个包含20个对象的数组扫描您添加的

league\u id

“？