Vuejs2 将数组作为道具传递，在子对象中使用v-for不起作用

在vue中，我希望我的父母将数组作为道具传递给孩子。然后，子级应使用v-for呈现该数组的所有内容

我使用：steps=“[1,2,3]”作为道具传入数组，并使用一个div作为带有：for=“step-in-steps”的容器，但它只呈现一个没有内容的div

*** parent.vue template:

    <recipesListItem
      title="Name"
      description="text"
      :steps="[1, 2, 3]">
    </recipesListItem>

*** child.vue template:

    <div>
      {{ title }}<br>
      {{ description}}
      <div :for="step in steps">
        {{ step }}
      </div>
    </div>

*** child.vue script:

    import Vue from 'vue'

    export default Vue.extend({
      name: 'recipesListItem',
      props: {
           [ ... ]
      steps: Array
      }
    })    

***parent.vue模板：
***child.vue模板：
{{title}}

{{description}}
{{step}}
***child.vue脚本：
从“Vue”导入Vue
导出默认Vue.extend({
名称：“recipesListItem”，
道具：{
[ ... ]
步骤：数组
}
})    

预期结果：显示标题、说明和内容为“1”、“2”和“3”的3个div
实际结果：标题说明，仅显示1个div，不显示任何内容

---

提前感谢您的帮助

像这样更改child.vue模板

<div>
  {{ title }}<br>
  {{ description}}
  <div v-for="step in steps" :key="step">
    {{ step }}
  </div>
</div>

{{title}}

{{description}}
{{step}}

您应该使用“v-for”来呈现列表或数组，并且不要忘记绑定键，这对呈现很重要。可能是：像您的情况一样，简单数组不需要密钥绑定。如果您使用“步骤”绑定：key，那么请记住“步骤”值应该是唯一的，否则您可以使用以下方法

<div>
  {{ title }}<br>
  {{ description}}
  <div v-for="(step,index) in steps" :key="index">
    {{ step }}
  </div>
</div>

{{title}}

{{description}}
{{step}}

此外，还可以使用vue chrome调试器确保将列表传递给子组件并可用于渲染。在下图中，App是父组件，HelloWorld是子组件

---

因为我已经想用索引+1为步骤编号，所以您的第二个解决方案正是我所需要的。非常感谢你。我犯了一个多么愚蠢的错误。