如何在vuetify中的v-for中制作v-sculpt-loader？

我想展示一个v-skeleton-loader在 Vuetify 中。我用过v-if and 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>

But the v-skeleton-loader屏幕上看不到。

VImage has a placeholder slot https://vuetifyjs.com/en/components/images/#placeholder它将用于自定义在加载图像时显示的加载器组件：

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

demo https://codepen.io/tony19/pen/OJMjvNz?editors=1010