[Vuejs]-Vue loading component

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

Leave a comment