'How to make v-skeleton-loader inside v-for in vuetify?

I am trying to show a v-skeleton-loader in Vuetify. I have used v-if and v-else. If the image is not loaded, then it should show the skeleton loader. Otherwise, it should should show the image. This is my code:

<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 is not seen on the screen.

vue.jsvuejs2vuetify.js


Solution 1:[1]

VImage has a placeholder slot that would be used for customizing the loader component to be shown while the image is loading:

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

demo

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tony19
Solution 2 Naveen

Related Questions