使用Vue.JS / Axios和来自第三方API的数据填充DOM

Posted 2023-01-09

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

注： API数据（JSON）有点令人困惑，因为它是某种数组数组结构（我已经与提供程序进行过交谈，他们有充分的理由来构造此端点是）。

现在我真的不知道如何进行。我认为问题在于Vue.js找不到所需的数据（因为我无法正确编码该数据）。

这是我的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，但是没有任何数据。.：

答案

您在v-for中使用了错误的键rank in info，如果要使用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>