如何在 vuetify 中制作 v-for 内部的 v-骨架加载器?

Question

我试图在 Vuetify 中显示一个v-skeleton-loader。我用过v-if和v-else.如果未加载图像，则它应显示骨架加载器。否则，它应该显示图像。这是我的代码：

<template>
<v-col v-for="option in options" :key="option.id" cols="6">
<v-lazy :options="{ threshold: 0.5 }" min-height="130">
<v-hover v-slot="{ hover }">
<v-card id="options_card" link width="160">
<v-sheet v-if="!images" class="px-3 pt-3 pb-3">
<v-skeleton-loader max-width="300" type="image"></v-skeleton-loader>
</v-sheet>
<v-img
v-else
id="thumbnail"
width="100%"
height="130"
:src="option.thumbnail"
></v-img>
</v-card>
</v-hover>
</v-lazy>
</v-col>
</template>
<script>
export default {
data() {
return {
images: false,
}
},
mounted() {
this.images = true
},
}
</script>

但是屏幕上看不到v-skeleton-loader。

Answer 1

>VImage有一个placeholder槽，用于自定义加载图像时要显示的加载器组件：

<v-img>
<template v-slot:placeholder>
<v-sheet>
<v-skeleton-loader />
</v-sheet>
</template>
</v-img>

演示

Answer 2

<v-img>
<template v-slot:placeholder>
<v-sheet>
<v-skeleton-loader />
</v-sheet>
</template>
</v-img>