Issue
I have a very simple site where I'm using the most basic Vue.
When I load the site, it renders divs which are not supposed to show, for a fraction of a second, before hiding them. It makes the site look very unprofessional.
Here is the site if you want to experience the glory of flashing divs: http://sqlforever.com/
Looking around on the web, I've tried to use v-show
, v-if
and even v-cloak.
None of them work.
Here is an example where I'm using v-show
, along with v-cloak
:
<div class="row v-cloak" v-show="display_schema">
...
</div>
The definition of v-cloak
:
[v-cloak] { display:none; }
Vue definition:
const app = new Vue({
el: '#app',
data: {
...
errorMsg: "",
warnMsg: "",
...
display_schema: false,
...
Else where I'm using v-if
:
<div class="row">
<div id = "errorPanel" v-if="errorMsg != ''" class="alert alert-danger alert-dismissible fade show v-cloak" role="alert">
<strong>ERROR: </strong> {{errorMsg}}
<!--button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button-->
</div>
<div id = "warnPanel" v-if="warnMsg != ''" class="alert alert-warning alert-dismissible fade show v-cloak" role="alert">
<strong>WARNING: </strong> {{warnMsg}}
<!--button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button-->
</div>
</div>
Currently I'm also loading css and js directly off the web, I'll load them locally when this goes 'production' but simple experiments didn't seem to make a difference.
I'm not normally a web dev but I've done a site or two using knockoutjs and don't remember having this issue.
What am I doing wrong?
Solution
You're using v-cloak
but incorrectly. From the docs:
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.
It's a directive, not a class name. Your CSS is correctly styling it as an attribute:
[v-cloak] { display:none; }
But you need to apply it in your template as a directive, not a class name. For example, this will remove the flash of content:
<div class="container" id="app" v-cloak>
Answered By - Dan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.