将数据对象从 Vue for 循环传递给组件答案

【问题标题】：Pass data object to component from Vue for loop将数据对象从 Vue for 循环传递给组件
【发布时间】：2017-10-12 08:30:25
【问题描述】：

所以我有一些带有帖子的对象，我正在使用 v-for 在自定义组件中对其进行迭代，但是如何将数据从该对象传递到该组件，循环是一回事，显示数据是另一回事.. .

<app-single-post v-for="post in posts" postData="$post"></app-single-post>

这是我的组件声明。我还需要某种特殊的道具设置吗？一次又一次出现同样的错误：

Property or method "postData" is not defined

【问题讨论】：

您可以通过“道具”将数据传递到组件中。有关详细信息，请参阅vuejs.org/v2/guide/components.html#Passing-Data-with-Props。道具也应设置为 kebab case，例如 html 元素上的“post-data”。
你的意思是数据竞争道具？你能举个例子吗？

【解决方案1】：

使用binding syntax。

<app-single-post v-for="post in posts" :post="post" :key="post.id"></app-single-post>

Camel 大小写的属性在用作属性时需要转换为 kebab-case。另外，我添加了一个key。当您使用v-for 时，您应该始终使用key，并且在您迭代自定义组件时需要它。理想情况下，如果有可用的post.id，您会希望使用它。

在你的组件中，你应该有一个这样定义的属性：

export default {
    props:["post"],
    methods: {...},
    etc.
}

要在组件模板中引用帖子，您可以使用

 {{post.id}}

以及内部方法

this.post

【讨论】：