使用VueJS和Axios的外部API的列表呈现
使用VueJS和Axios的外部API的列表呈现
提问于 2017-06-07 04:11:37
我有一段时间得到我的VueJs应用程序来呈现来自外部API的数据。我试图寻找一个类似的问题，但我发现的一切都没有帮助。
我正在使用美国农业部营养数据库。当我运行下面的代码时，我可以通过dev工具看到，当我单击按钮时，我的getNutrients函数正在成功地调用数据库，但是我的v-for元素不会呈现任何数据。如果我试图简单地从我的nutrients对象呈现data，我就能够呈现所有原始的JSON，只是当我试图在v-for元素中呈现单数项时就不行了。
任何帮助使渲染工作将是非常感谢的。
提前谢谢你
<template>
<div>
<button @click="getNutrients">Click</button>
<ul>
<li v-for="nutrient in nutrients">{{nutrient.nutrient_id}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'home',
data () {
return {
nutrients: {}
}
},
methods: {
getNutrients: function () {
axios.get('https://api.nal.usda.gov/ndb/nutrients/?format=json&api_key=DEMO_KEY&nutrients=205&nutrients=204&nutrients=208&nutrients=269')
.then(response => {this.nutrients = response.data})
}
}
}
</script>如果有帮助的话，我正在通过Vue-CLI使用Vue Webpack模板.
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-06-07 04:38:25
API返回一个report对象，该对象包含一个foods数组，每个数组都包含一个nutrients数组，因此您需要遍历foods，然后遍历每个food中的nutrients
<ul>
<li v-for="food in foods">
<h2>{{food.name}}</h2>
<ul>
<li v-for="nutrient in food.nutrients">{{nutrient.nutrient_id}}</li>
</ul>
</li>
</ul>
axios.get(url).then(response => {
this.foods = response.data.report.foods
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44403353
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号