length of undefined

[Fabirm9]

I have these errors, help please.

My code is:

[kyuwoo-choi]

please share the issue with the reproducible demo.

[The28AWG]

demo:

<template>
  <div>
    <vue-slick-carousel ref="slick" key="slick" v-bind="slickOptions">
      <div v-for="i in items" :key="i.id + '_' + Math.random()">
        {{ i.id }}
      </div>
    </vue-slick-carousel>
  </div>
</template>

<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {
  layout: 'simple',
  name: 'Test',
  components: {
    VueSlickCarousel
  },

  data() {
    return {
      slickOptions: {
        autoplay: true,
        variableWidth: true,
        dots: true,
        swipeToSlide: true,
        arrows: false
      },
      items: []
    }
  },

  mounted() {
    const f = []
    for (let i = 0; i < 100; i++) {
      f.push({ id: i })
    }
    this.items = f
  }
}
</script>

[The28AWG]

mounted method not need. =)

[The28AWG]

its error with empty items/default slot

[The28AWG]

yep.

<vue-slick-carousel v-bind="slickOptions"> </vue-slick-carousel>

TypeError: Cannot read property 'length' of undefined at VueComponent.slideCount (vue-slick-carousel.umd.js?a7ab:10656)

[kyuwoo-choi]

Although the carousel is assumed to have children, It'll be better to handle the no child exception.

[The28AWG]

It’s just that the content may load a bit later. Specify v-if as the content is missing or not yet loaded.

[fgoulhot]

Hi,

I have this problem too.

Do you have a plan to provide a fix for this?

Regards

[fgoulhot]

Hi, For the others, I got around the bug by adding an empty div in the slot.

[hari03]

Adding v-if resolved the issue, as:

<VueSlickCarousel v-bind="settings" v-if='yourVariable.length'> ... </VueSlickCarousel>

[rolexta]

same issue when try to use it on component

[mcanvar]

It's strange, I experienced this on a nuxt.js app then I register the component(despite no need to do that), it solved the issue.