CODEWITHSUNDEEP
vue.jsvuejs2loading
João Saro
João Saro

Reputation: 543

Vue: remove a component when other is completely loaded

<template>
    <div id="app">
      <Loading></Loading>
      <Content></Content>
    </div>
</template>

<script>
import Loading from './Loading.vue'
import Content from './Content.vue'

export default {
  name: 'App',
  components: {
    Loading,
    Content
  }
}
</script>

What is the best and elegant way to handle a loading component and remove it (or vue component or change styles) when all page is loaded?

I tried with v-cloack, but I think its not working beyond data stuff. I tried with mounted, but doesn't seems to work.

Upvotes: 2

Views: 2291

Answers (1)

Niklesh Raut
Niklesh Raut

Reputation: 34914

v-cloak is to hide un-compiled mustache bindings until the Vue instance is ready. So you can use v-if to show/hide loading component.

var child1 = Vue.extend({
    template: "<div>Loading...</div>"
});
var child2 = Vue.extend({
    template: "<div>After Component loaded</div>",
});
var app = new Vue({
    el: "#vue-instance",
    data: {
        loading: true
    },
    mounted() {
            var vm =  this;
            setTimeout(function() {
          vm.loading = false;
                }, 1000);
    },
    components: {
        child1,
        child2
    },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
    <child1 :name="name" v-if="loading"></child1>
    <child2 :name="name" v-if="!loading"></child2>
</div>

Upvotes: 2

Related Questions