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?

Is this possible? If not whether there is another solution to change the element in the second component when the addPhoto method is executed? — moses toh
– moses toh, Commented Jul 14, 2017 at 9:01
What is the relationship between the first component and the second? Are they parent-child or siblings? Typically you would $emit an event from the child and register a handler for that event in the parent, otherwise you can get a reference to a component using ref and use that to call the method directly. — Decade Moon
– Decade Moon, Commented Jul 14, 2017 at 10:36

Super Kai - Kazuya Ito · Accepted Answer · 2021-10-02 10:14:01Z

14

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

edited Oct 2, 2021 at 10:14

Super Kai - Kazuya Ito

42.7k23 gold badges257 silver badges256 bronze badges

answered May 15, 2018 at 5:43

Mir Ayman Ali

1,0452 gold badges10 silver badges16 bronze badges

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

Comments

ironcladgeek · Accepted Answer · 2017-07-14 13:12:53Z

10

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.

answered Jul 14, 2017 at 13:12

ironcladgeek

1,1301 gold badge14 silver badges14 bronze badges

1 Comment

Abdul azeez VP Over a year ago

tutorial link is not found, please update if you could.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related