为什么 Vue.js/Axios 不渲染我定义的数据?

问题描述

我使用 Vue.js + Axios 从第三方 API 查询数据.数据返回得很好，但它有一些令人困惑的结构(嵌套数组).

不知何故，Vue 无法正常工作，而且我在前端看不到任何数据.

重要提示:

在我运行代码后，Vue 向前端添加了 20 个 html div(它与包含元素的数量相匹配，但它不显示相应的数据(见下图)).

这里可能有什么问题?

Javascript 部分:

var app = new Vue({el: '#app_name',数据: {信息:[]},安装(){公理.get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + League_id).then(响应 => {this.info = response.data.api.standings[0];console.log(response.data.api.standings[0]);});}

HTML 部分:

 
<div><p>团队</p></div><div v-for="信息中的排名"><p>{{排名}}</p>

这是JSON返回，注意嵌套数组:

{API":{结果":1，排名":[[{等级":1，team_id":85，"teamName": "巴黎圣日耳曼","logo": "https://media.api-football.com/teams/85.png","group": "法甲1","forme": "DLWLL","description": "晋级 - 欧冠(小组赛阶段)",全部": {比赛次数":35，赢":27，画":4，输":4，目标为":98，目标对阵":31},家": {比赛次数":18，赢":16，画":2，输":0，目标":59，目标对阵":10},离开": {比赛次数":17，赢":11，画":2，输":4，目标":39，目标对阵":21},目标差异":67，点数":85，"lastUpdate": "2019-05-04"},{...}]]}}

在执行 Javascript 之前:

Javascript 执行后:

更新

我尝试了这个修改(来源:https://github.com/axios/axios/issues/738) 但我仍然没有呈现任何数据

 var app = new Vue({el: '#app_name',数据: {信息:[]},安装(){axios.interceptors.request.use(config => {config.paramsSerializer = params =>{//Qs 已经包含在 Axios 包中返回 Qs.stringify(params, {数组格式:括号"，编码:假});};返回配置；});公理.get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + League_id).then(响应 => {this.info = response.data.api.standings;console.log(response.data.api.standings);});}

解决方案

 
<p>{{排名}}</p>

这里的Rank是一个对象，如果你想使用你需要的rank key

{{Rank.rank }}

I query data from a third party API using Vue.js + Axios. The data is returned nicely however it has a bit of confusing structure (nested array).

Somehow the Vue doesn't properly work and I don't see any data renderedat the frontend.

Important to note:

The Vue adds exactly 20 html divs to the frontend after I run the code (which matchs the number of containing elements, but it doesn't display the according data(see images below)).

What might be an issue here?

Javascript part:

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 part:

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

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

            </div>

This is the JSON return, note the nested array:

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

Before Javascript is executed:

After Javascript is executed:

UPDATE

I tried it with this modification (source: https://github.com/axios/axios/issues/738) but still I don't have any data rendered

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

解决方案

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

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

Here Rank is an object, if you mean to use the rank key you need to

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

这篇关于为什么 Vue.js/Axios 不渲染我定义的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！