Vue passing data to the component

Question

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

Rashad Saleh · Accepted Answer · 2017-01-06 14:08:11Z

2

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.

answered Jan 6, 2017 at 14:08

Rashad Saleh

2,8471 gold badge25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue passing data to the component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related