在子代中使用v-for将数组作为Prop传递不起作用

Question

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

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

::placeholder

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

在此先感谢您的帮助

Answer 1

像这样更改您的child.vue模板。

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

您应该“ v-for”渲染列表或数组，并且不要忘记绑定对于渲染很重要的键。可能是：像您这样的简单数组，不需要键绑定。而且，如果您确实将：key与“ step”绑定，那么请记住，“ step”值应该唯一，否则可以使用以下方法。

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

此外，您可以使用vue chrome调试器来确保将列表传递到子组件并可供呈现。在下面的图片中，App是父组件，而HelloWorld是子组件。