Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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:

enter image description here

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?

like image 324
KodeFor.Me Avatar asked Apr 04 '16 16:04

KodeFor.Me


People also ask

What is lazy loading in VUE JS?

Lazy loading refers to an approach by which all the scripts are not loaded on the DOM as the application starts. Instead, they're only loaded when requested, which makes the JavaScript bundle size very small at initial load. Vue.

What is V cloak in VUE JS?

The v-cloak directive is a Vue. js directive that will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide uncompiled mustache bindings until the Vue instance is ready.


1 Answers

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.

like image 138
Linus Borg Avatar answered Oct 15 '22 01:10

Linus Borg