vuejsとaxiosを使用したJSON APIからのデータ表示

Question

以下は、私が構築しているVue.jsアプリケーション用のJSとHTMLコードです。

データは正常に返されますが、前面に表示できません。

ご協力いただければ幸いです。

data() { 
 
    return { 
 
     overview: this.getOverview() 
 
    } 
 

 
    }, 
 
    methods: { 
 
    getOverview() { 
 
     return axios.get('http://localhost:8000/v1/overview') 
 
     .then(response => { 
 
      this.results = response.data 
 
      console.log('results data', this.results) 
 
     }) 
 
     .catch(function(error) { 
 
      console.log(error); 
 
     }) 
 
    } 
 
    }

<tr v-for="overview in overview"> 
 
    <td> 
 
    {{overview.id}} 
 
    </td> 
 

 
    <td></td> 
 
    <td class="text-right"> 
 
    {{overview.schools}} 
 
    </td> 
 
    <td class="text-right"> 
 
    {{overview.primary}} 
 
    </td> 
 
    <td class="text-right"> 
 
    {{overview.secondary}} 
 
    </td> 
 

 
</tr>

JSONデータ

{"schools":545,"counsellors":4,"reports":13,"sub_regions":[{"id":1,"name":"Barima-Waini","schools":45,"primary":42,"secondary":3},{"id":2,"name":"Pomeroon-Supenaam","schools":45,"primary":37,"secondary":8},{"id":3,"name":"Essequibo Islands-West Demerara","schools":72,"primary":59,"secondary":13},{"id":4,"name":"Georgetown","schools":69,"primary":54,"secondary":15},{"id":5,"name":"Outside Georgetown","schools":62,"primary":31,"secondary":31},{"id":6,"name":"Mahaica-Berbice","schools":39,"primary":32,"secondary":7},{"id":7,"name":"East Berbice-Corentyne","schools":71,"primary":54,"secondary":17},{"id":8,"name":"Cuyuni-Mazaruni","schools":31,"primary":28,"secondary":3},{"id":9,"name":"Potaro-Siparuni","schools":22,"primary":20,"secondary":2},{"id":10,"name":"Upper Takutu-Upper Essequibo","schools":49,"primary":45,"secondary":4},{"id":11,"name":"Upper Demerara-Upper Berbice","schools":40,"primary":32,"secondary":8}]} 

Answer 1

免責事項：私は本当に自分自身

VUE使ったことがない問題は、あなたがoverviewという名前のビューモデルプロパティに、あなたのビューでデータバインディングされていることです。あなたが見ることができるように、我々はからの応答を割り当てる

return axios.get('http://localhost:8000/v1/overview') 
    .then(response => { 
    this.results = response.data; 
    console.log('results data', this.results); 
    }) 
    .catch(function(error) { 
    console.log(error); 
    }); 

：overviewの値は、それが解決するかどうかあなたの約束チェーンの最終.thenが値を返さないため、必然的に、未定義で解決されますPromiseですAPIはresultプロパティを呼び出しますが、これは私たちがバインドするものではありません。私はバート氏が示唆しているように、this.resultの代わりにthis.overviewに割り当てる必要があると思っていますが、私は単に約束のチェーンで解決された値を返すほうがよいでしょう。

Vueを使用しているので、あなたは蒸散しているので、読みやすくするためにasync/awaitを利用する必要があります。

はバートのリンクで役立つ分析に

async getOverview() { 
    try { 
    const {data:{json:{sub_regions}}} = await axios.get('http://localhost:8000/v1/overview'); 
    console.log('results data', sub_regions); 
    this.overview = sub_regions; 
    } 
    catch (error) { 
    console.log(error); 
    return []; 
    } 
} 

感謝のようなコードを書いて考えてみましょう、私はあなたがこの

のようなものに終わるだろう共通のVueパターン

を反映して答えを更新しました

new Vue({ 
    el: "#app", 
    data() { 
    return { 
     overview: [] 
    } 

    }, 
    methods: { 
    async getOverview() { 
     try { 
     const {data:{json:{sub_regions}}} = await axios.get('http://localhost:8000/v1/overview'); 
     console.log('results data', sub_regions); 
     this.overview = sub_regions; 
     } 
     catch (error) { 
     console.log(error); 
     return []; 
     } 
    } 
    }, 
    created(){ 
    this.getOverview() 
    } 
})