Vuetify：在元素加载后隐藏骨架加载器答案

【问题标题】：Vuetify: Hide a skeleton loader after a element loadsVuetify：在元素加载后隐藏骨架加载器
【发布时间】：2020-02-19 09:52:50
【问题描述】：

我一直在尝试在 Vuetify 中创建一个简单的骨架加载器，它在加载文档的资源（如图像）时显示，然后在所有内容完全加载时隐藏（替换为 <v-card>）。

目前，我有这个<v-skeleton-loader>：

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

我的v-card 元素像这样使用v-show：

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

对于反应属性，我有：

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

我正在尝试使用 Vue.js 的 updated 生命周期钩子更新这些属性的值：

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

}

目前，Vue Devtools 告诉我属性没有更新为在updated 挂钩中定义的新值。当 DOM 的 readyState 更改为 complete 时，如何更改它以便正确更新值？

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案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
}

【讨论】：

如果面对文件的人没有定义，你可以尝试放置挂载的钩子而不是创建的钩子。 reference
@meekittipol 这是 SSR 特有的，但是是的，如果是这种情况，那就需要这样做。

【解决方案2】：

你必须遵守document.readyState：

mounted: function() {
  var that = this;

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

【讨论】：

【解决方案3】：

 <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>

【讨论】：