VueJS - Mustache syntax displayed for a split second

Question

I am trying to find out vue and created the sample below for testing purposes:

import App from '../comp/app.vue'; import Two from '../comp/two.vue'; const routes = [ { path: '/', component: App }, { path: '/two', component: Two } ] const router = new VueRouter({ base: base.pathname, mode: "history", routes // short for routes: routes }) window.app = new Vue({ el: "#container", data: { message: "home", date: new Date(), seen: false, fruits: [ { name: "apple" }, { name: "orange" }, { name: "banana" } ] } }) 

But before inserting any values, the page will display the mustache syntax for a short time. Almost as if VueJS was not working. After a while, VueJS will start and populate the correct values ​​for the variables.

Why is this happening and how can I fix this behavior?

Answer 1

This is because vueJS has not booted yet.

you can use the so-called "v-cloak" to hide it. To do this, add this to your css:

 [v-cloak] { display: none; } 

And decorate your element with v-cloak tag as follows:

 <div v-cloak> {{ message }} </div> 

More information can be found at: https://vuejs.org/v2/api/#v-cloak