Vuetify：元素加载后隐藏骨骼加载器

Question

我一直在尝试在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时正确更新值？

Answer 1

Answer 2