7👍
✅
According to the Component props doc, you can pass data to child component like this :
<child name="value"></child>
and
<child :name="value"></child>
for dynamic props
So, in your template, when you loop over items array, you got item object. Just pass it to your child component
<demo-list-item v-for="item in items" :item="item">
Also, in your child component, you have to tell that you attempt to get a prop named item
var DemoListItem = Vue.extend({
template : '#demo-list-item-template',
props: ['item']
});
You can validate props, set default value, etc (see doc)
Now, in your child template, you have access to item
property
<li data-id="{{item.id}}">{{ item.name }}</li>
Source:stackexchange.com