Vueはコンポーネントにデータを渡します

Question

私の子Vueコンポーネントは、親Vueオブジェクトからデータを渡そうとすると、常にundefinedを返します。

var Candidates = Vue.extend({ 
      template: '#candidateTable', 
      props: ['candidates'], 
      data: function() { 
       return { 
        show: true, 
        columns: [], 
        reverse: false, 
        filters: {} 
       } 
      } 
     }); 

、その後、私はこのような親のVueオブジェクトインスタンス化：ここで

は、私はコンポーネントを定義する方法です

new Vue({ 
      components: { 
       'Candidates': Candidates, 
      }, 
      el: '#examGroups', 
      data: { 
       candidates: data.students, 
       componentsArray: ['Candidates'] 
      }   
    } 

をして、テンプレートが

<script type="text/template" id="candidateTable"> 
<table :is="candidates"> 
</table> 
<!--- header etc --> 
<tbody v-if="show === true"> 
    <tr v-for="candidate in candidates" 
     :candidates="candidates">..... 
</script> 

ですブラウザでVueオブジェクトをチェックすると、要素に候補プロパティがありますが、それはですあなたは「候補者をインスタンス化する必要がhttp://optimizely.github.io/vuejs.org/guide/composition.html

Answer 1

：テンプレートにv-withとv-componentを使用することを提案しているが、どちらか彼らと任意の喜びを持っていなかった：

すべてのヘルプはここにいくつかの他のドキュメントを見つけ

を高く評価しましたルートVueインスタンステンプレートのコンポーネントは、そのインスタンスにデータを具体的に渡します。あなたが今やっている

<candidates :candidates="candidates"></candidates> 

：

<tr v-for="candidate in candidates" 
    :candidates="candidates"> 

は単に<tr>要素のインスタンスにあなたの候補データオブジェクトを供給している他の言葉では、あなたのテンプレートは、このような何かを持っている必要があります - 候補コンポーネントではありません。