VueJsデータバインディングの問題

Question

属性と一部のデータをテンプレートにバインドしようとしましたが、以下のコードは機能しません。 n個のテンプレートをレンダリングする必要があるのは、printFormsオブジェクトの量に依存し、適切なオブジェクトから各テンプレートデータを実装することです。 私のコードに間違いがありますか何か考えてください。

P.S.次のように私は、コンソールに警告しました： は[ヴューが警告]：エラーを表現「printedForm.docNumber」を評価するとき：TypeError例外：

<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：（コンポーネントで見つかった）未定義のプロパティ「docNumber」を読み取ることができません以下のコード：

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

あなたはその

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

と成分pで定義するようなprintedFormプロパティ:printed-form="printedForm"をバインドする必要がありますROPS属性として名前を支えるキャメル記法使用しているとき、あなたは彼らのケバブケース（ハイフン区切り）を使用する必要が

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

Vue props

お知らせ

Vue Docs