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

Question

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 == 'complete') {
        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 complete?

标签： javascriptvue.jsvuetify.js

Answer 1

updated只有在更新组件时才会调用钩子。Vue 生命周期与 DOM 事件无关。如果页面加载后没有更新，updated则不会触发。

这可以通过常规 DOM 事件侦听器来完成：

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

  document.addEventListener('readystatechange', readyHandler);

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