javascript - Vuetify: Hide a skeleton loader after a element loads - Stack Overflow

admin管理员组

文章数量:1328953

I've been trying to create a simple skeleton loader in Vuetify that is shown while the document's resources (like images) are being loaded and then hidden (replaced with a <v-card>) when everything is fully loaded.

Currently, I have this <v-skeleton-loader>:

<v-skeleton-loader v-if="loading == true" :loading="loading" transition="fade-transition" type="card">
</v-skeleton-loader>

My v-card element uses v-show like this:

<v-card max-width="344" v-show="loaded">

For reactive properties, I have:

data: () => ({
    loading: true,
    loaded: false
})

I am trying to update the values of those properties using the updated lifecycle hook of Vue.js:

updated: function() {
    if (document.readyState == 'plete') {
        this.loading = false;
        this.loaded = true;
    }

}

Currently, Vue Devtools tells me that the properties are not being updated with their new values, defined in the updated hook. How can I change that so the values are properly updated when the readyState of the DOM has changed to plete?

I've been trying to create a simple skeleton loader in Vuetify that is shown while the document's resources (like images) are being loaded and then hidden (replaced with a <v-card>) when everything is fully loaded.

Currently, I have this <v-skeleton-loader>:

<v-skeleton-loader v-if="loading == true" :loading="loading" transition="fade-transition" type="card">
</v-skeleton-loader>

My v-card element uses v-show like this:

<v-card max-width="344" v-show="loaded">

For reactive properties, I have:

data: () => ({
    loading: true,
    loaded: false
})

I am trying to update the values of those properties using the updated lifecycle hook of Vue.js:

updated: function() {
    if (document.readyState == 'plete') {
        this.loading = false;
        this.loaded = true;
    }

}

Currently, Vue Devtools tells me that the properties are not being updated with their new values, defined in the updated hook. How can I change that so the values are properly updated when the readyState of the DOM has changed to plete?

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow asked Feb 19, 2020 at 9:52 TKD21TKD21 28311 gold badge55 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

updated hook is called only when a ponent is updated. Vue lifecycle isn't tied to DOM events. If there were no updates after page load, updated won't be triggered.

This can be done with regular DOM event listener:

created() {
  const readyHandler = () => {
    if (document.readyState == 'plete') {
        this.loading = false;
        this.loaded = true;
        document.removeEventListener('readystatechange', readyHandler);
    }
  };

  document.addEventListener('readystatechange', readyHandler);

  readyHandler(); // in case the ponent has been instantiated lately after loading
}

You must observe document.readyState:

mounted: function() {
  var that = this;

  if (document.readyState === 'plete')
    this.$set(that, 'loaded', true);
  else
    document.addEventListener('readystatechange', function() {
      if (document.readyState === 'plete')
        that.$set(that, 'loaded', true);
    })
}

 <v-card class="card" v-if="loaded">
   <h2>xxxx</h2>
 </v-card>
 <v-sheet class="pa-3" v-else>
  <v-skeleton-loader
    class="mx-auto"
    type="card"
  ></v-skeleton-loader>
</v-sheet>

本文标签： javascriptVuetify Hide a skeleton loader after a element loadsStack Overflow