Vue async component callback

Question

<template>
    <div>
        <AsyncComponent1></AsyncComponent1>
        <!-- Render AsyncComponent2 after AsyncComponent1 -->
        <AsyncComponent2></AsyncComponent2>
    </div>
</template>

<script>
export default {
    name: "My Component"
    components: {
        AsyncComponent1: () => import("./AsyncComponent1"),
        AsyncComponent2: () => import("./AsyncComponent2")
    }
};
</script>

I'm loading two components asynchronously within a component but I need one of the components to render after the other. I wonder if thats possible?

Steven Spungin · Accepted Answer · 2019-02-18 03:54:55Z

1

Add a v-if to a ref in the other component.

<template>
   <div>
       <AsyncComponent1 ref="c1"></AsyncComponent1>
       <!-- Render AsyncComponent2 after AsyncComponent1 -->
       <AsyncComponent2 v-if="$refs.c1"></AsyncComponent2>
   </div>
</template>

answered Feb 18, 2019 at 3:54

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

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

Comments

rh16 · Accepted Answer · 2019-02-18 03:22:06Z

You could have the first component emit an event, that is listened to by the parent and used to toggle the second component

<template>
    <div>
        <AsyncComponent1 v-on:loaded="componentLoaded"></AsyncComponent1>
        <!-- Render AsyncComponent2 after AsyncComponent1 -->
        <AsyncComponent2 v-if="hasComponent"></AsyncComponent2>
    </div>
</template>

<script>
export default {
    name: "My Component",
    components: {
        AsyncComponent1: () => import("./AsyncComponent1"),
        AsyncComponent2: () => import("./AsyncComponent2")
    },
    data: {
        hasComponent: false
    },
    methods: {
        componentLoaded() {
            this.hasComponent = true;
        }
    }
};
</script>

And then in AsyncComponent1.vue:

...
mounted() {
    this.$emit("loaded");
}
...

Collectives™ on Stack Overflow

Vue async component callback

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related