Question

我有一段时间让我的VueJs应用程序从外部API渲染数据。我试图寻找类似的问题，但我发现的一切都没有帮助。

我正在使用USDA's nutrition database。当我运行下面的代码时，我可以通过开发工具看到我的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模板。

Answer 1

API返回一个report对象，其中包含foods数组，每个数组都包含一个nutrients数组，因此您需要遍历{{1}然后通过每个foods中的nutrients：

food

使用VueJS和Axios列出外部API的渲染

1 个答案: