Vue.js Loading and hiding async component

Question

I am making a chatbot in vue.js and I need your help. I created 2 Vue components:

ChatLoader.vue - first components that render a button to open actual webchat window
Webchat.vue - the async component that only loads when I
Click on a button to open the chat window.

So what my ChatLoader.vue is doing is setting parameter chatInitialized = true on button click. Then the chat window is opened.

In my Webchat.vue I have a close button which on click only hides the chat window (not removed from DOM) by setting showWindow = false;

Now when the chat window is hidden I again see the button to open the chat (which was there all the time only not visible because overlapped by chatwindow) but when I click on the button now I want to set showWindow = true in Webchat.vue component instead of the previous behavior, so the webchat window is shown again.

ChatLoading.vue:

    <template>
    <div>
        <span class="open-chat" v-on:click="showChat">
            <i class="icon ficon-live-chat"></i>
            Virtual assistant
        </span>
        <Webchat v-if="chatInitialized"></Webchat>
    </div>
</template>

<script>
    import ChatLoading from "./ChatLoading.vue";

    const Webchat = () => ({
        component: import('./Webchat.vue'),
        loading: ChatLoading
    });

    export default {
        data() {
            return {
                chatInitialized: false
            }
        },
        components: {
            Webchat
        },
        methods: {
            showChat() {
                this.chatInitialized = true;
            }
        }
    }
</script>

Webchat.vue:

<template>
    <div class="chat-window" v-show="showWindow">
        <button type="button" class="cancel icon ficon-close" v-on:click="minimize"></button>
        <WebchatPlugin
        >
        </<WebchatPlugin>
    </div>
</template>

<script>
    import <WebchatPlugin{
        createDirectLine,
        createStore
    } from "botframework-webchat/lib/index";
    import {DirectLine} from "botframework-directlinejs";

    export default {
        data() {
            return {
                showWindow : true
            }
        },
        components: <WebchatPlugin
        methods: {
            minimize() {
                this.showWindow = false
            }
        },
</script>

How can I accomplish that? Thank you

Terry · Accepted Answer · 2019-10-07 12:45:38Z

1

If you want to toggle the child component's (<Webchat>) state showWindow from a consuming parent component, then you will have to create a method in the child component that can be invoked by the parent element.

First of all, in your Webchat component, create a new method, say maximize, that will change this.showWindow to true:

methods: {
    minimize() {
        this.showWindow = false;
    },
    maximize() {
        this.showWindow = true;
    }
},

Then, in your parent component, you can then:

Create a reference to your Webchat component
Use this.$ref to access the component and its inner methods, and call the maximize() method you've just created:

Example:

<template>
    <div>
        <span class="open-chat" v-on:click="showChat">
            <i class="icon ficon-live-chat"></i>
            Virtual assistant
        </span>

        <!-- Use `ref` attribute to create a reference to component -->
        <Webchat ref="webchat" v-if="chatInitialized"></Webchat>
    </div>
</template>

<script>
    import ChatLoading from "./ChatLoading.vue";

    const Webchat = () => ({
        component: import('./Webchat.vue'),
        loading: ChatLoading
    });

    export default {
        data() {
            return {
                chatInitialized: false
            }
        },
        components: {
            Webchat
        },
        methods: {
            showChat() {
                this.chatInitialized = true;

                // Access Webchat component's inner method
                // Do this inside `this.$nextTick` to ensure it is accessible
                this.$nextTick(() => {
                    this.$refs.webchat.maximize();
                });
            }
        }
    }
</script>

edited Oct 7, 2019 at 12:45

answered Oct 7, 2019 at 12:41

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

3 Comments

Euan Smith Over a year ago

You beat me to it - however I think you may have an issue - you are calling maximize() when the child component may not yet have been created. You might need to do this conditionally only if the chat is already initialised.

Terry Over a year ago

@EuanSmith True that, let me update my answer. Probably makes sense to wrap it inside this.$nextTick()

user2466601 Over a year ago

@Terry thanks, that solved my issue! Didn't know about $refs property in vue.js yet.

Collectives™ on Stack Overflow

Vue.js Loading and hiding async component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related