第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

使用 Vue.JS/Axios 和來(lái)自第三方 API(基于 Django?。┑臄?shù)據(jù)填充 DOM

使用 Vue.JS/Axios 和來(lái)自第三方 API(基于 Django?。┑臄?shù)據(jù)填充 DOM

我想使用 Vue.js 用從第三方 API 獲取的數(shù)據(jù)填充 DOM(也就是說(shuō)我無(wú)法控制 API)。Vue 函數(shù)調(diào)用并返回所需的數(shù)據(jù),它還會(huì)創(chuàng)建正確數(shù)量的 html div。但問(wèn)題是沒(méi)有數(shù)據(jù)轉(zhuǎn)發(fā)到那些 html/p 容器。注意: API 數(shù)據(jù) (JSON) 有點(diǎn)令人困惑,因?yàn)樗悄撤N數(shù)組中數(shù)組結(jié)構(gòu)(我已經(jīng)與提供者進(jìn)行了交談,他們有充分的理由按原樣構(gòu)建此端點(diǎn))。但是它返回?cái)?shù)據(jù)就好了?,F(xiàn)在我真的不知道如何進(jìn)行。這是我的 Vue.js 函數(shù):          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 的結(jié)構(gòu)方式:{    "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                    },和v-for輸出,它創(chuàng)建了正確數(shù)量的 html div,但沒(méi)有任何數(shù)據(jù)..:這是來(lái)自 Vue dev-tools 的信息:
查看完整描述

2 回答

?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊

您rank in info在 v-for 中使用了錯(cuò)誤的鍵,standings如果您要使用,請(qǐng)將其重命名為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>

更新


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('updated info', response.data.api.standings[0]); // can you share the value here ?

                });

            }

編輯: 代碼在下面工作正常,您的問(wèn)題應(yīng)該在其他地方。


https://jsfiddle.net/59Lnbk17/1/


查看完整回答
反對(duì) 回復(fù) 2021-11-18
?
元芳怎么了

TA貢獻(xiàn)1798條經(jīng)驗(yàn) 獲得超7個(gè)贊

這最終對(duì)我有用:


將分隔符從大括號(hào)更改為其他任何內(nèi)容,因此 Django 也不會(huì)腐蝕它,因?yàn)樗淖兞恳彩褂么罄ㄌ?hào)。


根據(jù)初始問(wèn)題工作的解決方案:


JS:


  var app = new Vue({

    delimiters : ['[[',']]'],

    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 id="app">

          <div class="table" id="Rank">

          <div><p>Rank</p></div>

          <div v-for="standings in info" class="rank"><p>[[ standings.rank ]]</p></div>

          </div></div>


查看完整回答
反對(duì) 回復(fù) 2021-11-18
  • 2 回答
  • 0 關(guān)注
  • 260 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)