如何在 vuetify 的 v-for 中制作 v-skeleton-loader？答案

【问题标题】：How to make v-skeleton-loader inside v-for in vuetify?如何在 vuetify 的 v-for 中制作 v-skeleton-loader？
【发布时间】：2020-10-17 18:42:29
【问题描述】：

我正在尝试在 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: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。

【问题讨论】：

我的意思是你对 api 进行异步调用吗？
因为在mounted中将images设置为true是没有意义的，因为当组件在dom中渲染时它总是true

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

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

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

demo

【讨论】：

【解决方案2】：

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

【讨论】：

欢迎您。请解释它如何解决问题。单独放置代码并不是一个好习惯。