CODEWITHSUNDEEP
vue.js
Evgeny Ladyzhenskiy
Evgeny Ladyzhenskiy

Reputation: 151

VueJs data binding issue

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
        }
      }
    ]
  }
});

Upvotes: 2

Views: 1057

Answers (1)

ABDEL-RHMAN
ABDEL-RHMAN

Reputation: 3014

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

Upvotes: 7

Related Questions