[英]DIsplay data from JSON API using vuejs and axios
Below is my JS and HTML code for a Vue.js application I'm building. 以下是我正在构建的Vue.js应用程序的JS和HTML代码。
The data returns fine but I'm unable to display it on the front. 数据返回正常,但我无法在前面显示它。
Any help would be appreciated. 任何帮助,将不胜感激。
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>
{"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}]}
Disclaimer: I've never really used Vue myself 免责声明:我从未真正使用过Vue
The problem is that you are databinding in your view to a view model property named overview
. 问题是您正在将视图中的数据绑定到名为
overview
的视图模型属性。 The value of overview
is a Promise
that will inevitably resolve with undefined, if it resolves, because the final .then
in your promise chain does not return a value: overview
的值是一个Promise
,如果它解决,将不可避免地使用undefined来解决,因为您的promise链中的final .then
不会返回值:
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);
});
As you can see, we are assigning the response from the API call to a result
property but that is not what we are binding to. 如您所见,我们正在将API调用的响应分配给
result
属性,但这不是我们要绑定的属性。 I believe that, as Bert suggests, you need assign to this.overview
instead of this.result
if possibly, I would prefer to simply return the resolved value in the promise chain. 我相信,正如Bert建议的那样,如果可能的话,您需要分配给
this.overview
而不是this.result
,我更愿意简单地返回承诺链中的已解决值。
Speaking of promise chains, since you are using Vue, you are transpiling, since you are transpiling, you should leverage async
/ await
for superior readability. 说到承诺链,由于您正在使用Vue,因此您在进行代码转换,因为您在进行代码转换,因此应该利用
async
/ await
来提高可读性。
Consider writing code such as 考虑编写如下代码
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 [];
}
}
Thank to Bert's link and helpful analysis, I have updated the answer to reflect a common Vue pattern 感谢Bert的链接和有用的分析,我更新了答案以反映常见的Vue模式
You will end up with something like this 你最终会得到这样的东西
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()
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.