CODEWITHSUNDEEP
vue.jsvuejs2vue-component
sarnei
sarnei

Reputation: 277

Send like a prop a attribute using v-for

From parent to children, I want to send a prop. But the attribute is define by v-for in the parent.

In this case, listItem is an array, its contains items, and each item is a object (with title attribute).

Something like: 

<li v-for="(item, i) in listItem" :key="item.id">
    <child-component title="item['title']"></child-component>
</li>

I have tried:

title="item['title']"

title="item.title"

title="{{item['title']}}"

title="{{item.title}}"

Upvotes: 1

Views: 705

Answers (1)

Joao Paulo
Joao Paulo

Reputation: 199

everytime you add ":" before a property, the content will be interpreted as javascript. Did you try this?

<li v-for="(item, i) in listItem" :key="item.id">
    <child-component :title="item.title"></child-component>
</li>

This may help you: https://v2.vuejs.org/v2/guide/syntax.html#Attributes

Upvotes: 3

Related Questions