VueJs data binding issue - vue.js

Question

I try to bind attributes and some data to my template but the code below doesn't work. What I need is to render n-amount of templates depends of amount of printedForms objects and implement in each template data from proper object.
Please give any ideas what wrong with my code.
P.S. I've warning in console as follows:
[Vue warn]: Error when evaluating expression "printedForm.docNumber": TypeError: Cannot read property 'docNumber' of undefined (found in component: )
<div id="app">
<printing-form v-for="printedForm in printedForms" track-by="id"></printing-form>
</div>
<template id="printingForm-template">
<img v-bind="printedForm.attributes">
<div>{{ printedForm.docNumber }}</div>
</template>
My VueJs code below:
Vue.component('printing-form', {
template: '#printingForm-template'
});
new Vue({
el: '#app',
data: {
printedForms: [
{
id: 1,
docNumber: 7,
attributes: {
src: '/waybill/img/4p_bus.png',
width: 1400,
height: 980
}
},
{
id: 2,
docNumber: 7777,
attributes: {
src: '/waybill/img/4p_cargo.png',
width: 1400,
height: 980
}
},
{
id: 3,
docNumber: 10000,
attributes: {
src: '/waybill/img/4p_selfMove.png',
width: 1400,
height: 980
}
}
]
}
});

Answer 1

you need to bind a printedForm property :printed-form="printedForm" like that
<printing-form v-for="printedForm in printedForms"
track-by="id" :printed-form="printedForm"></printing-form>
and define it in component props
Vue.component('printing-form', {
template: '#printingForm-template',
props: ['printedForm']
});
Vue props
Notice when using camelCased prop names as attributes, you need to use their kebab-case (hyphen-delimited) equivalents
Vue Docs