vue.js - 如何在 vuetify 中的 v-for 中制作 v-skeleton-loader？

Question

我想展示一个 v-skeleton-loader在 Vuetify 中。我用过 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:default="{ hover }">
               <v-card
                   link
                   width="160"
                   id="options_card"
               >
                      <v-sheet
                        class="px-3 pt-3 pb-3"
                        v-if="!images"
                      >
                         <v-skeleton-loader
                            max-width="300"
                            type="image"
                         ></v-skeleton-loader>
                      </v-sheet>
                      <v-img
                            width="100%"
                            height="130"
                            :src="option.thumbnail"
                            id="thumbnail"
                            v-else
                       ></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 slot这将用于自定义加载图像时显示的加载器组件:

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

demo