为什么Vue.js / Axios无法呈现我定义的数据?

乔纳斯

我使用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);
        });
    }
Artoju
 <div v-for="Rank in info">

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

这里的排名是一个对象,如果您要使用排名键,则需要

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么我的第一个加载数据axios是返回404 Vue Js?

Vue.js:为什么我的单文件组件没有在我的模板中呈现/显示

为什么更新后无法在vue.js上运行?

为什么我的tinymce图标突然消失了vue.js?

Vue.js 为什么我的数组值被清除了?

为什么 Vue.js 落后了?为什么我需要 jQuery 来获取当前值

为什么我在获取表单的值后无法重置表单(vue.js / js)

为什么Vue.js Chrome Devtools无法检测到Vue.js?

为什么我的Vue.js Nuxt应用程序中的图像请求未定义

为什么我无法从其他组件访问vue.js道具?

为什么我的vue.js按钮无法创建新的文本区域?

为什么我无法在 Vue.js 的新选项卡中打开任何文件

Vue.js:为什么我的数据不会显示在包含多种组件类型的列表中?

当数据设置为 true 时,为什么我的 bulma 模式不显示?(Vue.js)

为什么vue.js无法使用moment.js使用datepicker更新dom

Vue.js + Nuxt.js-在单元测试head()方法时,为什么我的计算属性未定义?

为什么删除必要的“}”会产生错误,但错误却能正确呈现页面[vue js]?

为什么我的D3js折线图无法呈现值和X轴?

为什么带有 axios 的 vue.js 语句开始的晚?

为什么 clearTimeout 不会阻止我在 Vue JS 中执行我的函数

Vue.js + Typescript:为什么无法将v模型识别为值?

Vue.js-地理位置无法在移动设备上运行...为什么?

为什么我得到 undefined 不是 vue js 中的对象错误

为什么我的vue.config.js文件不起作用?

为什么我的vue.config.js代理不起作用?

在Vue.js中,为什么我的计算属性不起作用

为什么我的代码中出现“GET/304 --”?(vue.js, 快递)

为什么我在 Vue.js 上收到 npm missing server 错误?

Vue.js 为什么我的观察者不工作?