How does Vue lifecycle works? and use it for skeleton and loading

Question

this question my look silly but i got stuck in this! i'm using Vuetify skeleton and created a data isLoading like the codes bellow. on page refresh every thing is fine but on route change (go back and forward in my pages) it's not working.

in my codes, when page is refreshed btn becomes disabled and mycomponent show skeleton using the same isLoading in its file. but when i go forward and back to it, my btn is loaded, not disabled, mycomponent load after a time without showing skeleton!

what's the problem! i guest it's about using the lifecycle!

<template>
    <div>
        <v-btn :disabled="isLoading">Button</v-btn>
        <mycomponent />
    </div>
</template>

<script>
import mycomponent from '~/components/mycomponent'

export default {
    components:{
        'mycomponent': mycomponent
    },
    data(){
        return{
            isLoading: true
        }
    },
    created(){
        this.isLoading = true
    },
    mounted(){
        this.isLoading = false
    }
}
</script>

mycomponent:

<template>
    <v-skeleton-loader
    :loading="isLoading"
    type="button"
    width="100%"
    >
        <v-btn>Button</v-btn>
    </v-skeleton-loader>
</template>

<script>

export default {
    data(){
        return{
            isLoading: true
        }
    },
    created(){
        this.isLoading = true
    },
    mounted(){
        this.isLoading = false
    }
}
</script>

So The Problem: It only works when i land on page for first time or refresh browser. by going forward and back to this page neither disable button nor skeleton on component works.

Update

I'm on NuxtJs v2.13

Tony Tony · Accepted Answer · 2020-08-12T08:48:35

The created hook is called when the vue instance is created and the mounted hook is called when the vue instance has been mounted in the DOM. These hooks are called when a component is routed to for the first time or when the page is refreshed. That explains why it only works when you land on the page for the first time or refresh the browser.

When a component has been mounted, pressing the back button on the browser won't call the created and mounted hook.

To solve your problem, you can watch the $route object, by doing

App.vue

watch: {
  '$route' () {
     // this will be called any time the route changes
     this.isLoading = true // you can think of a way to make isLoading false
   }
},

For more on lifecycle hooks, check out this article.

How does Vue lifecycle works? and use it for skeleton and loading

1 Answers

App.vue