v- 안에서 v-skeleton-loader를 시각적으로 만드는 방법?

v- 안에서 v-skeleton-loader를 시각적으로 만드는 방법?

나는 a를 보여주려고 한다.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화면에 보이지 않는다.

VImage이미지를 로드하는 동안 표시할 로더 구성 요소를 사용자 지정하는 데 사용되는 슬롯:

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

데모를 하다

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

참조URL: https://stackoverflow.com/questions/62607008/how-to-make-v-skeleton-loader-inside-v-for-in-vuetify