Reputation: 177
hello I want to add in vue component a carousel with vue slick carousel like this
<vue-slick-carousel
v-if="groupOne && groupOne.length > 0"
v-bind="settings"
>
<component
:is="picture.template"
v-for="picture in groupOne"
:key="picture.title"
:params="picture"
:size="params.size"
@click="onClick(picture)"
/>
</vue-slick-carousel>
<script>
import 'vue-slick-carousel/dist/vue-slick-carousel.css';
export default{
components: {
VueSlickCarousel: () => import('vue-slick-carousel'),
}
data() {
return {
settings: {
arrows: true,
slidesToShow: 1,
lazyLoad: 'ondemand',
autoplay: true
}
};
},
}
</script>
is don't work i have this error in my console
Uncaught (in promise) TypeError: this.$slots.default is undefined
Please help me!
Upvotes: 1
Views: 1310
Reputation: 1
I also had this problem.
I fixed it by putting v-if='groupOne.length > 0'
, and the error disappeared.
Upvotes: 0
Reputation: 113
I had a similar error message and the reason turned out to be trivial. I had a few sliders on the site and some of them had an empty list of items. A slider with no content throws just such an error. Just wrapped all sliders with v-if='collection.length > 0'
and problem has gone.
Upvotes: 2
Reputation: 1
It seems that the issue comes from the dynamic import, try to use normal import like :
<vue-slick-carousel
v-if="groupOne && groupOne.length > 0"
v-bind="settings"
>
<component
:is="picture.template"
v-for="picture in groupOne"
:key="picture.title"
:params="picture"
:size="params.size"
@click="onClick(picture)"
/>
</vue-slick-carousel>
<script>
import 'vue-slick-carousel/dist/vue-slick-carousel.css';
import VueSlickCarousel from 'vue-slick-carousel'
export default{
components: {
VueSlickCarousel
},
data() {
return {
settings: {
arrows: true,
slidesToShow: 1,
lazyLoad: 'ondemand',
autoplay: true
}
};
},
}
</script>
Upvotes: 2