How to trigger a method in Single File Component from another Single File Component VueJS

Question

I have Three components I want to trigger the show() method that is located in overlay.vue component, from the about.vue component

I am a beginner so I wish if I found some help from you guys

first is overlay.vue

<template>
    <div class="overlay"></div>
</template>

<script>
export default {
    name: "overlay",
    methods: {
        show() {
            document.querySelector(".overlay").style.display = "block";
        }
    }
};
</script>

second is about.vue

<template>
    <section class="about">
        <div class="container">
            <div class="row video">
                <div class="col-lg-6 order-lg-1 order-2">
                    <img
                        class="dots img-fluid"
                        src="../assets/images/dots.svg"
                        alt="dots"
                    />
                    <div class="video-wrapper">
                        <div class="video-img">
                            <img
                                class="img-fluid"
                                src="../assets/images/video.png"
                                alt="#"
                            />
                        </div>
                        <div class="video-i">

                            <!-- ***************************************************************
                            ***** this is where i want to trigger the method using this below a tag*****
                            *************************************************** -->
                            <a href="#"><i class="fas fa-play"></i></a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

The third which is the parent app.vue where I import about.vue and overlay.vue

<template>
    <div id="app">
        <overlay></overlay>
        <about></about>
    </div>
</template>

<script>
import overlay from "./components/overlay";
import about from "./components/about";
export default {
    name: "App",
    components: {
        about,
        overlay
    }
};
</script>

Use the store. In the `show` method, set a store value to true. Then in about.vue, have bind the show state to the div you want to modify. If you're doing don manipulations (`querySelector`) in a vue app, you're probably doing something wrong. — Trenton Trama, Mar 07 '20 at 12:30

score 0 · Answer 1 · answered Mar 07 '20 at 13:04

0

You can do something like this, in your app.vue set a variable to show your overlay.vue or not. And then in the overlay.vue set a props that change the style of your component. This solution is not using a dom manipulation.

app.vue

<template>
    <div id="app">
        <overlay :show="show_overlay"></overlay>
        <about></about>
    </div>
</template>

<script>
import overlay from "./components/overlay";
import about from "./components/about";
export default {
    name: "App",
    data(){
        return {
            show_overlay:false
        }
    },
    components: {
        about,
        overlay
    }
};
</script>

overlay.vue

<template>
    <div class="overlay" :style="[(this.show) ? 'display:block' : 'display:none']"></div>
</template>

<script>
export default {
    name: "overlay",
    props:{
        show:{
            default:false,
            type:Boolean
        }
    }
};
</script>

answered Mar 07 '20 at 13:04

I Gusti Ngurah Arya Bawanta

76
6

You can add buttons or text or something, and when it clicked, just simply change the show variable into true. example `` – I Gusti Ngurah Arya Bawanta Mar 07 '20 at 13:25
I am really grateful for this, but this is not exactly what i want. I want to do this function from a sibling component which is `about.vue` by clicking at button or whatever, not from the parent which is `app.vue`. But thank you so much for this respond too. – MR Loll Mar 07 '20 at 13:59
Oh I just understand what your question means – I Gusti Ngurah Arya Bawanta Mar 07 '20 at 14:08
Okay, Sir. I really still don't know how to achieve this. – MR Loll Mar 07 '20 at 14:09
1. You can add `ref` to your `overlay.vue` 2. in your `about.vue` in your href you can call the show function at `overview.vue` by using `$parent.$children.$refs.[ref_name].show()` Here a useful example from other user : https://stackoverflow.com/questions/33682651/call-a-vue-js-component-method-from-outside-the-component – I Gusti Ngurah Arya Bawanta Mar 07 '20 at 14:20

score 0 · Accepted Answer · answered Mar 10 '20 at 13:13

because the two components are siblings and not imported in each other I coulden't use $ref and the best choice is to use Store

this is my store code

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        showOverlay: false
    },
    mutations: {
        //showing the overlay
        TOGGLE_OVERLAY(state, payload) {
            state.showOverlay = payload;
        }
    },
    actions: {
        //showing the overlay
        toggleOverlay(context, payload) {
            context.commit("TOGGLE_OVERLAY", payload);
        }
    },
    getters: {
        getStatus: state => state.showOverlay
    }
});

and here where i dispatch it. I dispatch it from about.vue or any other component as well

<a @click.prevent="toggleOverlay" href="#"><i class="fas fa-play"></i></a>

    methods: {
        toggleOverlay() {
            this.$store.state.showOverlay = !this.$store.state.showOverlay;
            this.$store.dispatch(
                "toggleOverlay",
                this.$store.state.showOverlay
            );
        }
    }

How to trigger a method in Single File Component from another Single File Component VueJS

2 Answers2