0👍
The simplest way would be is adding a property loading initialized to true
in data property and use this to control visibility of the loading element using v-if
Simple demo:
<div id="app">
<div v-if="loading" class="loading">Loading...</div>
<h5>{{content}}</h5>
</div>
script
new Vue({
el: '#app',
data:{
content: null,
loading: true
},
mounted(){
setTimeout(() => {
this.content= 'Data fetched from external server od database';
this.loading = false;
},3000);
//if you had a data fetching api like axios, set the loading to false in the success callback handler
axios.get('/api').then( data => {
console.log(data);
this.loading = false;
});
}
})
Here is the demo fiddle
- [Vuejs]-Setting Vuetify Circular Progress Bar value after uploading image to firebase store
- [Vuejs]-Vue class binding with strings?
Source:stackexchange.com