How can I update data from parent component when I click child component on the vue component?

Question

My first component (child component) like this :

<template>
    ...
</template>
<script>
    export default {
        ...
        methods: {
            addPhoto() {
                const data = { id_product: this.idProduct}
                const item = this.idImage
                this.$store.dispatch('addImage', data)
                    .then((response) => {
                         this.$parent.$options.methods.createImage(item, response)
                    });
            },
        } 
    }
</script>

If the method addPhoto called, it will call ajax and then it will get response ajax

I want to send response ajax and another parameter to method createImage. Method createImage is located in parent component (second component)

My second component (parent component) like this :

<template>
    <div>
        <ul class="list-inline list-photo">
            <li v-for="item in items">
                <div v-if="clicked[item]">
                    <img :src="image[item]" alt="">
                    <a href="javascript:;" class="thumb-check"><span class="fa fa-check-circle"></span></a>
                </div>
                <a v-else href="javascript:;" class="thumb thumb-upload"
                   title="Add Photo">
                    <span class="fa fa-plus fa-2x"></span>
                </a>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        ...
        data() {
            return {
                items: [1,2,3,4,5],
                clicked: [], // using an array because your items are numeric
                test: null
            }
        },
        methods: {
            createImage(item, response) {
                console.log(item)
                this.$set(this.clicked, item, true)
                this.test = item
            },
        }
    }
</script>

If the code executed, it success call createImage method on parent component. The console log display value of item

But my problem is the data on parent component not success updated

How can I solve this problem?

Where in your parent component is the child referenced? are they really parent-child or are they both children of a higher order component? — Justin MacArthur

thanksd thanksd · Accepted Answer · 2017-07-14T17:08:52

You really should get in the habit of using events instead of directly accessing the parent component from a child.

In your case, it would be simple to emit an event in the then handler of the child's async request:

.then((response) => {
  this.$emit('imageAdded', item);
});

And listen for it in the parent scope:

<child-component @itemAdded="createImage"></child-component>

That way, any component that uses that child component can react to its imageAdded event. Plus, you won't ever need to spend time debugging why the createImage method is firing when it's never being called in the Vue instance.

Your code isn't working because the way you are invoking the createImage method means that the this inside the function will not be referencing the parent component instance when it is called. So setting this.clicked or this.test will not affect the parent instance's data.

To call the parent component's function with the right context, you would need to do this:

this.$parent.createImage(item, response)

How can I update data from parent component when I click child component on the vue component?

1 Answers