最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Pass data object to component from Vue for loop - Stack Overflow

programmeradmin0浏览0评论

So i have some object with posts, and i'm using v-for to iterate them in the custom ponent, but how to pass data from this object to this ponent, loop is a one thing displaying data i another...

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

This is my ponent declaration. Do i need also some kind of special prop setup? Have the same error, again and again:

Property or method "postData" is not defined

So i have some object with posts, and i'm using v-for to iterate them in the custom ponent, but how to pass data from this object to this ponent, loop is a one thing displaying data i another...

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

This is my ponent declaration. Do i need also some kind of special prop setup? Have the same error, again and again:

Property or method "postData" is not defined

Share Improve this question asked May 12, 2017 at 23:06 LukasLukas 7,74420 gold badges79 silver badges127 bronze badges 2
  • You can pass data into a ponent via 'Props'. See vuejs/v2/guide/ponents.html#Passing-Data-with-Props for more details. Props should also be set as kebab case eg 'post-data' on the html element. – Eilimint Commented May 12, 2017 at 23:09
  • what you mean data vie props? can you show some example? – Lukas Commented May 12, 2017 at 23:10
Add a ment  | 

1 Answer 1

Reset to default 10

Use the binding syntax.

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

Camel-cased properties need to be converted to kebab-case when they are used as attributes. Also, I added a key. You should always use a key when you use v-for and it is required when you iterate over a custom ponent. Ideally you would want to use a post.id if one is available.

In your ponent, you should have a property defined like this:

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

To reference the post in your ponent template you can use

 {{post.id}}

and inside methods it would be

this.post
发布评论

评论列表(0)

  1. 暂无评论