使用 VueJS 和 Axios 从外部 API 渲染列表

Question

让我的 VueJs 应用程序从外部呈现数据 API 让我费了好大劲。我试图寻找类似的问题，但我发现的一切都无济于事。

我正在使用 USDA's nutrition database。当我运行下面的代码时，我可以通过开发工具看到当我单击按钮时我的 getNutrients 函数正在成功调用数据库，但我的 v-for 元素不会呈现任何数据。如果我尝试简单地从我的 data 对象渲染 nutrients，我能够渲染所有原始 JSON，只是当我尝试渲染 [=13] 中的单个项目时不会=]元素.

如能提供有关渲染工作的任何帮助，我们将不胜感激。

提前致谢

<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数组，每个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
})

使用 VueJS 和 Axios 从外部 API 渲染列表

List rendering from an external API with VueJS and Axios

javascript

api

vue.js

axios