Vue v-if start hidden

Question

I have a v-if on a tag <span v-if="someValue"> which I want to start hidden and only become visible once the value in someValue is set to true. Unfortunately even if the value false from the start it still flashes up when loading the page (probably before Vue has time to remove the tag). Is there a nice way to deal with this issue?

Answer 1

The initial "flashing" is not actually related to the v-if.

It is due to the fact that you first load the dom and then vue js will "manipulate" it. Vue is loaded after your html markup and therefore you will see everything until vue js is finally loaded and will hide elements according to your code.

To get rid of this you can place a v-cloak directive on one of your outer elements and add a css like

[v-cloak].class-of-my-outer-element {
   display: none;
}

the v-cloak "attribute" will be removed by vue after it is initialized. that means nothing is shown until your code is ready.

Minor update / edit : Don't forget the v-cloak element needs to be inside if your #app or whereever you mount your vue application.