Pass data object to component from Vue for loop

Question

So i have some object with posts, and i'm using v-for to iterate them in the custom component, but how to pass data from this object to this component, 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 component 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

You can pass data into a component via 'Props'. See vuejs.org/v2/guide/components.html#Passing-Data-with-Props for more details. Props should also be set as kebab case eg 'post-data' on the html element. — Eilimint
– Eilimint, Commented May 12, 2017 at 23:09

tony19 · Accepted Answer · 2022-07-15 20:22:39Z

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 component. Ideally you would want to use a post.id if one is available.

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

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

To reference the post in your component template you can use

 {{post.id}}

and inside methods it would be

this.post

edited Jul 15, 2022 at 20:22

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 12, 2017 at 23:14

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Lukas Over a year ago

ok, but how to get acces to the object in component by {{post.id}} i have undefined error :(

Bert Over a year ago

@Lukas in your component you need to define the property, props: ["postData"].

Bert Over a year ago

@lukas you want it called post in the component?

Terry Over a year ago

Are you sure that individual objects in posts have a key called id? If not, it will throw an undefined error.

Bert Over a year ago

@Terry I inferred it from his comment; but you're right if it's not there it'll be undefined.

|

Collectives™ on Stack Overflow

Pass data object to component from Vue for loop

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related