Vue.js component within component (getting data from child component)

And I’m trying to extract data from a child vue components within the parent component.

I’m using Laravel 5.4, btw.

I’ve broken down my code. What I basically want to do here is get the ‘title’ from the child component (Store.vue) and show it the parent component (List.vue).

List.vue

<template>
    <div>
        <h1>{{ title }}</h1>
        <store></store>
    </div>
</template>

<script>

    import store from '../../components/List/Store.vue';

    export default {
        components: {
            'store': store
        },
        created() {
            this.title = store.title;
        },
        data () {
            return {
                title: ''
            };
        }
    }
</script>

Store.vue

<template>
</template>

<script>
    export default {
        created() {
            this.fetch();
            // alert('Store.vue is loaded');
        },
        data () {
            return {
                title: ''
            };
        },
        methods: {
            fetch: function () {
                this.title = 'my Title'
            },
        }
    }
</script>

Later I want to get the title (and all other needed data) from an Ajax call in Store.vue.

I guess this must be simple for some of you but I’m a bit of a newbie and I’ve been at this for a long time now. I really hope someone is willing to help me out here.

Thanks!

topvillas

9 years ago

Best Answer

Level 46

You can emit an event that passes the data and listen for that ... but don't.

It's much better and easier to pass data down to the component.

Kimmer

9 years ago

Level 4

Hej, thanks for your reply @topvillas . Do you mean making Store.vue the parent component and pass down the data to List.vue (which becomes the child) component using props?

topvillas

9 years ago

Level 46

Exactly! Try to make your data flow in one direction. It might be over the top for your needs but consider Vuex if you're going to be dealing with a lot of data.

Kimmer

9 years ago

Level 4

Alright, I think I understand. I’m adding some working code for other people that might need help.

In my blade template I’m calling ’store’ like this.

<store></store>

Then in my main app.js I require the Store.vue component. So Store.vue becomes the parent component

Vue.component('store', require('./components/List/Store.vue'));

This is Store.vue which fetches the title (“My Title”) which is bound to the “title” attribute in the tag in the template. This is also where I require List.vue.

<template>
    <div>
        <h1>{{ title }}</h1>
        <list v-bind:title="title"></list>
    </div>
</template>

<script>
    Vue.component('list', require('../../components/List/List.vue'));

    export default {
        created() {
            this.fetch();
        },
        data () {
            return {
                title: ''
            };
        },
        methods: {
            fetch: function () {
                this.title = 'My Title'
            },
        }
    }
</script>

Finally, List.vue which gets “title” from the attribute (in Store.vue) as a prop.

<template>
    <h1>{{ title }}</h1>
</template>

<script>
    export default {
        props: ['title']
    }
</script>

Thanks again @topvillas ! Obviously my goal is a bit more complex than this example code but I think I might juts be able to pull it off now. Thanks also for the Vuex tip but, honestly, I hardly understand what it does at the moment. ;-)

topvillas

9 years ago

Level 46

Vuex sounds more intimidating than it is.

It's basically a centralised data store(s) that you issue commands to.

Please or to participate in this conversation.