Prevent Vue.js to display brackets on slow clients [duplicate]

Question

I just made my first Vue.js app and it is awesome. The only problem that I have had is related to binding values on slow connections.

For example, in my template I have this code:

<div v-for="event in events">     <div class="start_time">         {{ event.start_time_formatted }}     </div>     <div class="icon_placeholder">         <img v-bind:src="event.icon" alt="Sport Image" />     </div>     <div class="event_title">         <a v-bind:href="event.url">             {{ event.title }}         </a>     </div>     <div class="button_placeholder">         <a v-bind:href="event.url" class="btn btn-filled">             Watch         </a>     </div> </div> 

But the problem is that I get this result until all my site's assets are loaded:

For example, in AngularJS example, you can bind values by using directives and prevent the brackets from being displayed.

How can I achieve this effect in Vue.js?

Answer 1

v-text should allow you to render more angular-ish, and and v-cloak can help you hide template content until compilation is finished for situations where you need mustache tags.