by Denis Karabaza
HTML
<script src="https://cdn.rawgit.com/yyx990803/vue/v1.0.21/dist/vue.js"></script>
<div id="demo">
<list :items="items" :item-component="$options.components.item"></list>
</div>
<hr/>
<ul>
<li>vue <a href="https://cdn.rawgit.com/yyx990803/vue/v1.0.21/dist/vue.js">v1.0.21</a></li>
</ul>
JavaScript
var item = {
template: '<div>{{ item.title }} [{{ item.count }}]</div>',
props: {
item: { required: true },
},
};
var list = {
template: '<ul><li v-for="item in items"><component :is="itemComponent" :item="item"></component></li></ul>',
props: {
items: { type: Array, required: true },
itemComponent: { required: true },
},
};
new Vue({
el: '#demo',
components: {
list: list,
item: item,
},
data: function() {
return {
items: [
{ id: 0, title: 'Apple', count: 5 },
{ id: 1, title: 'Pear', count: 6 },
],
};
},
});