无样式内容 vuejs 的 Flash

Question

我有问题。当我用 vue 加载页面时，我得到变量：@{{ value }}。但是当页面完全加载时，变量不可见。我该如何解决这个问题？我使用引导程序和之前包含的所有脚本：</body>。

我的模板：

<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 组件：

<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

尝试使用v-text 指令。 more detail

例子

<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

您可以使用v-html 指令来更新元素的innerHTML。 More detail

例子

<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（推荐）

或者使用v-cloak 指令。这可以将组合的 CSS 规则保留在元素上，直到关联的 Vue 实例完成编译。

例子

//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