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 속성을 호출하지만 우리가 바인딩하지는 않습니다. 나는 Bert가 말했듯이 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 []; 
    } 
} 

감사와 같은 코드를 작성하는 고려, 나는 당신이

같은 결과가 발생하는 일반적인 뷰 패턴

을 반영하기 위해 답을 업데이트 한

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