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

Мой дочерний компонент 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


person Linda Keating    schedule 06.01.2017    source источник


Ответы (1)


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

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

Чем вы занимаетесь сейчас:

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

просто предоставляет объект данных вашего кандидата экземплярам элемента <tr>, а не компоненту Candidates.

person Rashad Saleh    schedule 06.01.2017