Vue передаёт данные компоненту

Question

Мой дочерний компонент Vue всегда возвращает undefined, когда я пытаюсь передать данные из родительского объекта Vue.

Вот как я определяю компонент:

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 в браузере, у элемента есть свойство кандидатов, но оно равно undefined

Любая помощь приветствуется

Найдено некоторые другие документы здесь: что предлагает использовать v-with и v-component на шаблоне, но не было никакой радости с ними либо: http://optimizely.github.io/vuejs.org/guide/composition.html

Answer 1

Вы должны создавать экземпляры «кандидатов »в вашем корневом экземпляре экземпляра Vue, тогда передайте данные именно этому экземпляру. Другими словами, ваш шаблон должен иметь что-то вроде этого:

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

То, что вы делаете прямо сейчас:

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

просто поставляет своих кандидатов объект данных для экземпляров <tr> элемента - не компонент Кандидатов.