Vue Component: how to pass data from parent to child

Question

how can i access the doctor attribute from my doctor component ?

Vue.component('specialists', {
    template: `
    <div>
        <div class="list-group-item title">
            &raquo; {{ name }}
        </div>
        <doctor class="list-group-item" v-for="doctor in doctors">
            <a href="#" class="list-group-item-heading">
                {{ doctor.full_name }}
            </a>
        </doctor>
    </div>
    `,

    props: {
        name: {
            default: '',
        },
    },

    data: function() {
        return {
            algoliaClient: null,
            algoliaIndex: null,
            doctors: [],
        };
    },

    created: function() {
        this.algoliaClient = this.$parent.algoliaClient;
        this.algoliaIndex = this.algoliaClient.initIndex('medical_doctors');
    },

    mounted: function() {
        this.getDoctors();
    },

    methods: {
        getDoctors: function() {
            this.search(this.name);
        },

        search: function(input) {
            var _this = this;
            this.algoliaIndex.search(this.name, function(err, hits) {
                _this.setDoctors(hits.hits);
            });
        },

        setDoctors: function(data) {
            this.doctors = data;
        },
    },
});

// my doctor component
Vue.component('doctor', {
    template: `
        <div><slot></slot></div>
    `,

    data: function() {
        return {
            doctor: null, // here. how can i pass value to it? 
        };
    },
});

How can i access the doctor attribute from my specialists component ? I've tried accessing the this.$children from specialists component but the child is null

Possible duplicate of [vuejs update parent data from child component](http://stackoverflow.com/questions/40915436/vuejs-update-parent-data-from-child-component) — Saurabh, Feb 07 '17 at 10:07
@Saurabh that question read "from child to parent", this reads "from parent to child" — try-catch-finally, Jan 02 '19 at 20:01

score 0 · Answer 1 · answered Feb 13 '17 at 23:12

I'd try something like this :

Vue.component('specialists', {
    template: `
    <div>
        <div class="list-group-item title">
            &raquo; {{ name }}
        </div>
        <doctor class="list-group-item" v-for="doctor in doctors" :doctor="doctor">
            <a href="#" class="list-group-item-heading">
                {{ doctor.full_name }}
            </a>
        </doctor>
    </div>
    `,

    props: {
        name: {
            default: '',
        },
    },

    data: function() {
        return {
            algoliaClient: null,
            algoliaIndex: null,
            doctors: [],
        };
    },

    created: function() {
        this.algoliaClient = this.$parent.algoliaClient;
        this.algoliaIndex = this.algoliaClient.initIndex('medical_doctors');
    },

    mounted: function() {
        this.getDoctors();
    },

    methods: {
        getDoctors: function() {
            this.search(this.name);
        },

        search: function(input) {
            var _this = this;
            this.algoliaIndex.search(this.name, function(err, hits) {
                _this.setDoctors(hits.hits);
            });
        },

        setDoctors: function(data) {
            this.doctors = data;
        },
    },
});

// my doctor component
Vue.component('doctor', {
    template: `
        <div><slot></slot></div>
    `,

    props: {
        doctor: {
            default: '',
        }
    }
});

passing :doctor="doctor" in the for loop of the parent
and adding doctor to props in the child component

 props: {
    doctor: {
        default: '',
    },
},

Vue Component: how to pass data from parent to child

1 Answers1