CODEWITHSUNDEEP
javascriptvue.jsvue-component
francky
francky

Reputation: 177

vue slick carousel Uncaught (in promise) TypeError: this.$slots.default is undefined

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

Answers (3)

jonathan afranio
jonathan afranio

Reputation: 1

I also had this problem. I fixed it by putting v-if='groupOne.length > 0', and the error disappeared.

Upvotes: 0

yarpi87
yarpi87

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

Boussadjra Brahim
Boussadjra Brahim

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

Related Questions