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 <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.')
}
}
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