How can I call method in other component on vue.js 2?

Question

My first 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.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 other component (second component)

My second 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
            }
        },
        methods: {
            createImage(item, response) {
                this.$set(this.clicked, item, true)
            },
        }
    }
</script>

How can I run the createImage method on the second component and after that it can change the element in the second component?

Answer 1

If these 2 components are siblings (no parent & child), then one solution is to use event bus.

General idea is to build a global event handler like so: in main.js

window.Event = new Vue();

Then in your first component fire an event:

....
.then((response) => {
     Event.$emit('createImage', item, response)
});

and in second component register a handler for listening to createImage event in mounted() hook:

...
mounted() {
    Event.$on('createImage', (item, response) => {
        // your code goes here
    }
}

You can find more info by reading this turtorial and watching this screen cast.

Answer 2

No two components don't have a parent/child relation. They are all connected through the root vue instance. To access the root vue instance just call this.$root and you get the root instance.

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

and in the second component make the function that needs to be triggered

...
mounted() {
    this.$root.$on('createImage', (item, response) => {
        // your code goes here
    })
}

It acts more like a socket. The event will be globally available, due to $root.

N.B. adding the vue instance to global window object is a bad practice