在nuxt上使用vuetify骨架的最佳方法是什么

如何解决在nuxt上使用vuetify骨架的最佳方法是什么

我对vue，nuxt和vuetify及其各个方面都是新手。我正在使用vuetify进行nuxt项目，并想使用其骨架加载器，但是有点混乱。现在我使用这种模式 模板：

<v-skeleton-loader :loading="isLoading" type"card">
    <mycomponent />
</v-skeleton-loader>

脚本：

import skeleton from '@plugins/mixins/skeleton.js
export default {
    mixins:[skeleton]
}

skeleton.js：

export default{
    data(){
        return{
            loading: null
        }
    },computed:{
        isLoading(){
            return this.loading
        }
    },created(){
        this.loading = true
    },mounted(){
        this.loading = false
    }
}

当我第一次使用它时，它运行良好。我有一个静态页面，它的每个组件都有自己的骨架，每次加载页面时，它将显示它们的骨架，直到被加载为止。 但是...当我开始在不同页面上使用此模式时，我发现它有很多缺陷！

• 仅在刷新页面时显示骨架！
• 在向页面添加组件或数据时不会显示！例如为获取产品而进行的axios调用
• 在路线之间切换时无效
• 依此类推...

所以，我的问题是，使用骨架加载程序的最佳和实用方法是什么！我有一个页面，其中有一个通过组件的v-for循环，并且该组件的模板中有其自己的骨架。它仅在刷新时显示骨骼！ 像这样：

<div v-for="i in 10" :key="i">
    <mycomp />
</div>

mycomp：

<v-skeleton-loader :loading="isLoading" type"card">
    // components html codes
</v-skeleton-loader>

解决方法

我建议您创建骨架组件。而且在主要组件中，大多数应用程序都执行此操作，其中骨架的数量由分页固定或受限制：

<template v-if="loading">
  <skeleton v-for="i in 10" :key="i" />
</template>
<template v-else>
  <div v-for="item in items" :key="item.id">
    {{ item }}
  </div>
</template>