CODEWITHSUNDEEP
vue-componentvue.js
Linda Keating
Linda Keating

Reputation: 2435

Vue passing data to the component

My child Vue component always returns undefined when I try to pass data to it from the parent Vue object.

Here is how I define the component: 

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

and then I instantiate the parent Vue object like this: 

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

and then the template is a 

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

but when I check the Vue object in the browser the element has the candidates property but it is undefined

Any help appreciated

Found some other documentation here: that suggests using v-with and v-component on the template but haven't had any joy with them either: http://optimizely.github.io/vuejs.org/guide/composition.html

Upvotes: 0

Views: 769

Answers (1)

Rashad Saleh
Rashad Saleh

Reputation: 2847

You need to instantiate the "Candidates" component in your root Vue instance template then pass the data to that instance specifically. In other words, your template should have something like this:

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

What you are doing right now:

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

is simply supplying your candidates data object to instances of the <tr> element -- not a Candidates component.

Upvotes: 2

Related Questions