如何使用带有 v-for 循环的 vue.js 访问 API 数据 [关闭]答案

【问题标题】：How to access API data using vue.js with v-for loop [closed]如何使用带有 v-for 循环的 vue.js 访问 API 数据 [关闭]
【发布时间】：2019-10-09 22:41:15
【问题描述】：

Data into recipe API Data我正在循环一些API数据&无法访问对象的一部分

 I am using v-for method in vue.js. In the main div I loop through using 
 the iterator recipe, it works for everything except for 
 analyzedInstructions.steps

<div class="food" v-for="(recipe,index) in recipes" 
  v-bind:recipe="recipe" 
  v-bind:index="index"
  v-bind:key="recipe.id">
      <p>{{ recipe.title }}</p>
        <p> Ready in: {{ recipe.readyInMinutes }} minutes</p>
        <p>Serve's up to {{ recipe.servings }}</p>
        <p v-for="(dish) in recipe.dishTypes" v-bind:key="dish.id" v- 
 bind:dish="dish">Dish Type: {{ dish }}</p>
        <p v-for="(occasion) in recipe.occasions" v- 
bind:key="occasion.id" 
v-bind:occasion="occasion">Occasions: {{ occasion }}</p>
        <p>Cooking Instructions: {{ recipe.instructions }}</p>
        <ul>
        <li v-for="(step) in recipe.analyzedInstructions.steps" v- 
 bind:key="step.id" v-bind:step="step">Analyzed Instructions: {{ 
 step.step 
}}</li>
        </ul>



  </div>

这是api数据分析说明：[ { 姓名： ””，脚步： [ { 1号，步骤：lorem Ipsum

在

之后什么都没有出现

标签烹饪说明。控制台没有错误

【问题讨论】：

分析的api数据说明：[ { name: "", steps: [ { number: 1, step:
您能分享一下您的脚本标签之间的内容吗？
你也可以分享一个完整的recipe对象的console.log吗？
当你把数据放入recipe时，你能显示你的那部分代码

标签： javascript api vue.js v-for

【解决方案1】：

我确定您需要查看有关 Vue 反应性的文档。你不能在你的 Vue 组件中这样做：

recipe.analyzedInstructions = {whatever: 'it is'}

您可能需要Vue.set() 并确保您的数据是被动的。

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

【讨论】：