Noob Coder Noob Coder - 1 month ago 15
Javascript Question

how to get rid of this {{ user.id }} (curly braces) in vuejs while a page is in loading state

I'm using vuejs in my project and noticed that when a page is in loading state, I see something like this

{{ user.id }} {{ user.name }}
which is very annoying.

And after the page is fully loaded, I can see the
userId
and
user name
properly.

How to stop showing the these curly braces of vuejs in a page while it is in loading state?

Answer

There is a directive built for this purpose: v-cloak. http://vuejs.org/api/#v-cloak

This directive 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 un-compiled mustache bindings until the Vue instance is ready.

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>