Flash of unstyled content vuejs

Question

I have problem. When I loading page with vue, I get variables: @{{ value }}. But when page full loaded, variable not visible. How I can fix this? I use bootstrap and all scripts included before: </body>.

My template:

<div class="container padding-bottom-3x mb-1">
    <div class="row">
        <div class="col-lg-9">
          <ul class="messages-list" v-chat-scroll>
            <message v-for="value,index in chat.message" 
                :key=value.index 
                :user=chat.user[index]
                :time=chat.time[index]
            >
                @{{ value }}
            </message>
          </ul>
          <div class="send-message">
            <form action="">
              <div class="form-group">
                <span class="text-danger">@{{ typing }}</span>
                <textarea class="form-control" v-model='message' @keyup.enter='send'></textarea>
              </div>
            </form>
          </div>
          <!-- <nav class="pagination">
              <div class="column">
                <ul class="pages">
                  <li class="active"><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li>...</li>
                  <li><a href="#">12</a></li>
                </ul>
              </div>
              <div class="column text-right hidden-xs-down"><a class="btn btn-outline-secondary btn-sm" href="#">Next&nbsp;<i class="icon-arrow-right"></i></a></div>
            </nav> -->
        </div>
        <div class="col-lg-3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, iure totam ex laborum quidem vel nemo eveniet dolores natus id exercitationem veritatis maiores labore eum nam ab possimus, dolorum architecto!
        </div>
    </div>
</div>

Vue component:

<template>
<li>
    <div class="row">
        <div class="col-md-2 padding-right-none">
            <div class="avatar-user text-center">
                    <img :src="user.avatar" alt="">
            </div>
        </div>

        <div class="col-md-10 padding-left-none">
            <div class="user-name">
                <span>{{ user.name }} <i data-toggle="tooltip" title="Онлайн" class="material-icons online">fiber_manual_record</i> <span class="date float-right">{{ time }}</span></span>
            </div>
            <div class="message">
                <slot></slot>
            </div>
        </div>
    </div>
 </li>
</template>

<script>
export default {
    props: [
        'user',
        'time',
    ],
    mounted() {
        console.log('Component mounted.')
    }
}

Answer 1

Try using v-text directive. more detail

Example

<ul class="messages-list" v-chat-scroll>
        <message v-for="value,index in chat.message" 
            :key=value.index 
            :user=chat.user[index]
            :time=chat.time[index]
            v-text="value" 
        >
        </message>
      </ul>

UPDATE-1

You can use v-html directive to update the element's innerHTML. More detail

Example

<ul class="messages-list" v-chat-scroll>
        <message v-for="value,index in chat.message" 
            :key=value.index 
            :user=chat.user[index]
            :time=chat.time[index]
            v-html="value" 
        >
        </message>
      </ul>

UPDATE-2 (Recommended)

Or use v-cloak directive. That can keep the combined CSS rules on the element until the associated Vue instance finishes compilation.

Example

//Combine CSS rules to v-cloak
[v-cloak] {
  display: none;
}

//use it in component
<ul class="messages-list" v-chat-scroll>
        <message v-for="value,index in chat.message" 
            :key=value.index 
            :user=chat.user[index]
            :time=chat.time[index]
            v-cloak
        >
        {{value}}
        </message>
</ul>

Click here to learn more about v-cloak at Vue official documentation page