VueJs数据绑定问题

Question

我尝试将属性和一些数据绑定到我的模板,但下面的代码不起作用.我需要的是渲染n个模板取决于printForms对象的数量,并在每个模板数据中实现来自适当的对象.请提出任何想法我的代码有什么问题.

PS我在控制台中警告如下:[Vue警告]:评估表达式"printedForm.docNumber"时出错:TypeError:无法读取未定义的属性'docNumber'(在组件中找到:)

 <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>

我的VueJs代码如下:

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

你需要绑定一个这样的printedForm属性:printed-form="printedForm"

<printing-form v-for="printedForm in printedForms" 
track-by="id" :printed-form="printedForm"></printing-form>

并在组件道具中定义它

Vue.component('printing-form', {
  template: '#printingForm-template',
  props: ['printedForm']
});

Vue道具

注意当使用camelCased prop名称作为属性时,您需要使用它们的kebab-case(连字符分隔)等价物

Vue Docs