HTML Tags containing Vue.js v-if and v-for directives flash at loading

HTML Tags containing Vue.js v-if and v-for directives flash at loading

Use v-cloak and it will solve it.

https://vuejs.org/v2/api/#v-cloak

v-cloak

• Does not expect expression

• Usage:

  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.

• Example:

  [v-cloak] {
    display: none;
  }

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

  The <div> will not be visible until the compilation is done.