[Vuejs]-Dynamically render controller

by

0👍

You should include the component from the beginning, and just use v-if to render it when your messages load. Something like:

<chat-window v-if="messagesLoaded"></chat-window>

if(response.data.status == 200) {
    this.messages = response.data;
    this.messagesLoaded = true;    
}

The idea behind Vue is that you never manually render/append anything to the DOM, you just create the layout and let the javascript values drive the changing DOM. v-if will not render unless the value is true, so it won’t build the component until it’s needed.

If you need multiple conversations, just do

<template v-for="conversation in conversations">
    <chat-window :messages="conversation.messages">
    </chat-window>
</template>

Which would create a chat window for every conversation

Leave a comment