Prevent Vue.js to display brackets on slow clients

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?

May be it is duplicated, but the answer here is better than all the answers in the other one. — Nicolay77, May 14 '18 at 01:16

score 35 · Accepted Answer · answered Apr 04 '16 at 17:05

35

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.

answered Apr 04 '16 at 17:05

Linus Borg

23,622
7
63
50

1

Doesn't work for me, I'm fetching data from a third party API. – Edgar Quintero Jul 09 '18 at 22:53
1

Where your data is coming from has nothing to do with using v-text, so I don't know what you mean by that. – Linus Borg Jul 10 '18 at 09:27

Prevent Vue.js to display brackets on slow clients

1 Answers1

Linked