Menu
To hide the element but keep its space use :class="{ invisible: ! value }" to assign invisible class (which has visibility: hidden style applied to it).
Under the hood Vue will walk through all the properties that we define into the data and converts them to getter/setters using Object. defineProperty. When any data property gets a new value then the set function will notify the Watchers. A Watcher is created for each component when a Vue application is initialized.
Feb 3, 2020. The $refs property in Vue is used to reference DOM elements in the Vue instance's templates. A common use case for $refs is focusing on a DOM element when a certain event happens.
js $set() method to set data object properties. Binding a class on an item and controlling it by the truthy value of a data property is a powerful feature of Vue.
You can use the v-cloak directive, which will hide the Vue instance until the compilation finishes, if you combine it with the right CSS.
HTML:
<div v-cloak>{{ message }}</div>
CSS:
[v-cloak] { display: none; }
I attached the following codepen. You can see the difference with and without v-cloak.
<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>
http://codepen.io/gurghet/pen/PNLQwy
As suggested by others using v-cloak is proper solution. However as @ DelightedD0D mentioned it IS clunky. Simple solution is to add some CSS in the pseudo selector ::before of v-cloak directive.
In your sass/less file something along the lines of
[v-cloak] > * { display:none; }
[v-cloak]::before {
content: " ";
display: block;
position: absolute;
width: 80px;
height: 80px;
background-image: url(/images/svg/loader.svg);
background-size: cover;
left: 50%;
top: 50%;
}
Of course you'd need to provide a valid and accessible path to loader image. It will render something like.
Hope it helps.
Using v-cloak directive you can hide un-compiled mustache bindings until vue instance is done compiling. You must use the CSS block to hide it until compiled.
HTML:
<div v-cloak>
{{ vueVariable }}
</div>
CSS:
[v-cloak] {
display: none;
}
This <div> will not be visible until the compilation is completed.
You can see this link Hide elements during loading using v-cloak for better understating.
Don't include any vuejs syntax in the HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
</body>
</html>
In your main JavaScript, you can:
import Vue from 'vue'
import App from './App'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
See the vuetify webpack template for reference.
Another solution is to use:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Super app</title>
</head>
<body>
<div id="app" is="App"></div>
<script src="/app.js"></script>
</body>
</html>
With:
import Vue from 'vue'
import App from './App'
Vue.component("App", App);
const app = new Vue({});
window.addEventListener("load", async () => {
app.$mount("#app")
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With