VueJs data binding issue

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

ABDEL-RHMAN · Accepted Answer · 2016-10-07 11:59:11Z

7

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

answered Oct 7, 2016 at 11:59

ABDEL-RHMAN

3,05419 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bill Criswell Over a year ago

Beat me to it so I won't post my answer. Another thing I'd mention though it's not really related to the question is the component's template should have one root element.

ABDEL-RHMAN Over a year ago

no it shouldn't , it depend on what you are doing, i made that example check it vue exmple

Bill Criswell Over a year ago

Yes it should. In Vue 2 it's required. In Vue 1 you will end up with fragment instances and performance costs. v1.vuejs.org/guide/components.html#Fragment-Instance

ABDEL-RHMAN Over a year ago

@BillCriswell you are right , i found that in the Migration from Vue 1.x

Collectives™ on Stack Overflow

VueJs data binding issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related