Question

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吸血鬼

标签“烹饪说明”之后没有任何显示。控制台中没有错误

Answer 1

我确定您需要研究有关Vue中反应性的文档。您无法在Vue组件中这样做：

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

您可能需要Vue.set()并确保您的数据是反应性的。

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

如何使用带有v-for循环的vue.js访问API数据

1 个答案: