Vuetify Version: 2.2.27
Vue Version: 2.6.11
Browsers: Firefox 76.0
OS: Mac OS 10.15
In a nuxt component
<template>
<div>
<v-skeleton-loader :loading="loading" height="200px" type="list-item-two-line">
<client-only>
<div>client-only</div>
</client-only>
</v-skeleton-loader>
</div>
</template>
<script>
export default {
data() {
return {
loading: false
};
}
};
</script>
the skeleton should disapear and the content should show.
the skeleton is always visible, the content is never visible
https://codesandbox.io/s/skeleton-xsirz?file=/pages/index.vue
I can't seem to get loading to respond to anything
https://codepen.io/dbuckman/pen/PoPaLwb
I had the same kind of issue not using nuxt when the default content isn't present due to a v-if, wrapping it in is a workaround that might work in your situation.
I have a similar problem. I want to activate the skeleton loader only my data is loading. I tried to bind loading props to my request but it failed. Either it is loading all the time or is not activated at all.
I seem to have the same problem; the VSkeletonLoader never stops loading.
Given:
<v-skeleton-loader :loading="loading" type="article" transition="fade-transition">
<div v-if="someCondition">
qwop
</div>
</v-skeleton-loader>
Inspecting the components in Vue dev tool I see that the outer prop loading eventually gets set to false but the prop loading in VSkeletonLoader is still true. So the observer binding seems to be broken...
Thanks to @npbenjohnson this workaround fixes it for now:
<v-skeleton-loader :loading="loading" type="article" transition="fade-transition">
<template slot>
<div v-if="someCondition">
qwop
</div>
</template>
</v-skeleton-loader>
Most helpful comment
I had the same kind of issue not using nuxt when the default content isn't present due to a v-if, wrapping it in is a workaround that might work in your situation.