VueJs数据绑定问题

Question

我尝试将属性和一些数据绑定到模板，但下面的代码不起作用。我需要的是呈现n个模板的数量取决于printedForms对象的数量，并在每个模板中实现来自适当对象的数据。请告诉我我的代码有什么问题。

注意：控制台中有如下警告：[Vue warn]：计算表达式“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属性： print-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道具

请注意，当使用camelCash道具名称作为属性时，您需要使用它们的kebab大小写（连字符分隔）等价物

Vue文档