Vue.js Component Props
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<div id="demo">
<div v-for="n in 4">
<some-component :n="n"></some-component>
</div>
</div>
<script id="component_template" type="x-template">
<div>Component {{n}}</div>
</script>
JavaScript
Vue.component('some-component', {
props: ['n'],
template: '#component_template',
ready: function() {
this.on_some_event();
},
methods: {
on_some_event: function() {
console.log('Component: ' + this.n);
}
}
});
var demo = new Vue({
el: '#demo'
});