Question

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

P.S。我在控制台中发出如下警告： [Vue警告]：评估表达式时出错＆＃34; printedForm.docNumber＆＃34;：TypeError：无法读取属性＆＃39; docNumber＆＃39;未定义的（在组件中找到）

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

注意当使用camelCased道具名称作为属性时，您需要使用他们的kebab-case（连字符分隔）等价物

Vue Docs

VueJs数据绑定问题

1 个答案: